Question

jquery ajax问题

像图片上这种怎么用jquery的ajax方法来做？怎么从后台拿数据？然后怎么提交给后台？如果能给个例子的话，最好了！谢谢！！
我是做前端的，后台提供数据给我，我拿到数据展示出来。然后做题者把题目做好后，做题者点击提交【点击临时保存】把选好的答案传给后台，让后台去处理。我这边不做任何的逻辑处理！至于分数的问题，也是后台提供接口给我，我展示出来就可以了！请问这种该怎么做呢？用ajax方法应该怎么来处理啊？谢谢！在线等！





Answer 1

这东西我还真实现过，我做这个的时候对ajax与http的理解还很菜。告诉你改进办法，能不能实现看你，我写的ajax代码发来给你看看。
第一、要实现试题录入功能，这块你应该会。好用的试题录入功能，不好实现，我做的那个不太好用，每次都别人提供word做维护的帮录入的题目。这块自己考虑，直接录入的确很麻烦。看能否用word做个模板，用poi导入试题，这种方便用户也方便自己，当年做系统时间紧急，外加java还不会。我没考虑过这块内容，只实现了功能。
第二、试题保存到题库后，出题策略一般有两种
1、从试题库中随机抽取N道题，按单选、多选分类生成json。
2、单次录入试题，获取本次录入的所有试题按单选多选生成json。
第三、自动评卷，分两种实现策略。
1、快速，但不安全，把试题答案跟实体json一起放到web页面来，用js动态判卷，累积得分，用户提交试卷的时候，把得分显示给用户。这种方式答案可能会随试卷泄露。
2、从服务器上判卷，前端记录用户选择的答案，用实体id去关联，提交到服务器由服务器判定答案对错，并给出评分，最后反馈用户。
用户提交的答案一般来说要记录下来，我认为记录用户提交的答案（json转成string直接存储），最后得分，试卷id等。
所有数据存取操作全部用post方式，get处理的数据大小是1K，post看服务器设置，我用的domino最大4M足够一次出题用。
下面是我写的ajax实现代码，比较老旧的实现，改写成现代js框架ajax去实现兼容性会好：
全部代码贴不上来，我截取了主要的代码。
//生成试题
function ganarateTestQuestion (){
/*
*url:请求的url
*method:请求方法
*parames:请求参数
*returnType:回调函数返回的响应数据类型
*callback:回调函数名
*errorcallback:错误处理回调函数名
*/
var url="/"+dbpath+"/(AG_GetContestByUNID)?openagent";
var paras="&unid="+document.all.fld_ContestDocumentUNID.value.trim();
url+=paras+"&random="+Math.random();
var xmlHttp = new XMLHTTP(url,"get","","xml",contestXMLParser,errorHandle);

//解析试题文件
function contestXMLParser(xml){

var box = document.getElementById("contestContent");

box.innerHTML="";

//输出标题
printTitle(xml,box);

//输出类别
printCategory(xml,box);
document.getElementById("submitbtn").disabled="";
}

//错误处理
function errorHandle(error){
alert(error);
}

//打印标题
function printTitle(xml,e){
var contest = xml.getElementsByTagName("Contest")[0];
var title=contest.getElementsByTagName("Title")[0].text.trim();
var id=contest.getElementsByTagName("ID")[0].text.trim();

//设置窗口标题为标题
document.title=title;

var eTitle = document.createElement("div");
eTitle.setAttribute("id",id);
//标题样式
eTitle.className="title";

var text = document.createTextNode(title);
eTitle.appendChild(text);
e.appendChild(eTitle);
}

//打印类别
function printCategory(xml,e){
var cat = xml.getElementsByTagName("Category");
for (var i=0;i<cat.length;i++){
var iCat = cat[i];

var sort = parseInt(cat[i].getAttribute("sort"))+1;
var val = iCat.getAttribute("value");
var catName= iCat.getElementsByTagName("Name")[0].text.trim();

var eCat = document.createElement("div");
eCat.setAttribute("id","contest_Category_"+val);
eCat.className="";

var eCatName = document.createElement("p");
eCatName.className="title1";
var text =document.createTextNode(digitToChinese(sort)+"、"+catName);
eCatName.appendChild(text);
eCat.appendChild(eCatName);

//输出试题
printQuestion(iCat,eCat);

e.appendChild(eCat);
}
}

//打印试题
function printQuestion(cat,eCat){
var getSelAnswer= function(nodes) {
var sep = "\n";
var s = [];
for(var i=0;i<nodes.length;i++) {
//console.log(nodes[i])
if(nodes[i].text.trim() !== "") {
s.push(nodes[i].text.trim());
}
}
return s.join(sep);
};
var question = cat.getElementsByTagName("Question");
//alert(question.length)
for (var i=0;i<question.length;i++){
var iQuestion = question[i];
var sort = iQuestion.getAttribute("sort").trim();
var type = iQuestion.getAttribute("type").trim();
var id= iQuestion.getAttribute("id").trim();
var title = iQuestion.getElementsByTagName("Title")[0].text.trim();
var selAnswer = getSelAnswer(iQuestion.getElementsByTagName("SelectAnswer"));
var answer = iQuestion.getElementsByTagName("Answer")[0].text.trim();
var score = iQuestion.getElementsByTagName("Score")[0].text.trim();

//添加正确答案
var eAnswer = document.all.fld_Answer;
eAnswer.value+=eAnswer.value.trim()==""?"'"+id+"':"+"['"+answer+"','"+score+"']":",'"+id+"':"+"['"+answer+"','"+score+"']";

//添加试题ID列表
var eId = document.all.fld_QuestionId;
eId.value+=eId.value.trim()==""?id:","+id;

//输出
var eQuestion = document.createElement("div");
eQuestion.setAttribute("id",id);
eQuestion.className="textIndent";

//创建试题标题
var eTitle = document.createElement("p");
var titleList = title.split("{question}");
titleList.push("");
var text = document.createTextNode(sort+"."+titleList[0]);
eTitle.appendChild(text);
var thisQuestion = document.createElement("input");
thisQuestion.type="text";
thisQuestion.className="question_input";
thisQuestion.vlue="";
thisQuestion.id="question_"+id;
thisQuestion.readOnly="true";
eTitle.appendChild(thisQuestion);
text = document.createTextNode(titleList[1]);
eTitle.appendChild(text);

eQuestion.appendChild(eTitle);

//创建可选项
selAnList= selAnswer.split("\n");
for (var j = 0; j<selAnList.length; j++){
if (type=="Radio" || type=="CheckBox"){
var sel = document.createElement("input");
sel.setAttribute("type",type);
if (type=="Radio"){
sel.setAttribute("name","sel_Answer_"+id);
sel.setAttribute("id","sel_Answer_"+id);
}else{
sel.setAttribute("name","sel_Answer_"+id+"_"+j);
}
sel.setAttribute("value",letterList[j]);
sel.className="textIndent";
sel.attachEvent("onclick",selAnswerEvent(id,sel));
eQuestion.appendChild(sel);
sel.checked="";
var label = document.createTextNode(letterList[j]+"."+selAnList[j].trim());
eQuestion.appendChild(label);
var newline = document.createElement("br");
eQuestion.appendChild(newline);

/***test lixiaosuo***/
//sel.checked=true;
//thisQuestion.value=type=="Radio"?sel.value:thisQuestion.value+sel.value;

}
}
eCat.appendChild(eQuestion);
}

}

//点击
function selAnswerEvent(id,sel){
return function(){
var srcElement =sel;
eval("var testAnswer = {"+document.all.fld_TesterAnswer.value.trim()+"}");
document.all.fld_TesterAnswer.value="";

//点击单选按钮，记录答案
if (srcElement.type=="radio"){
testAnswer[id]=srcElement.value;
var sels = document.getElementsByName(sel.name);
for (var i=0;i<sels.length;i++){
if (sels[i].checked)sels[i].checked=false;
}
srcElement.checked=true;
//点击多选按钮 ，记录答案
}else if(srcElement.type=="checkbox"){
//增加答案
if (srcElement.checked){
if (testAnswer[id]==undefined){
testAnswer[id]=srcElement.value;
}else{
testAnswer[id]=testAnswer[id]+srcElement.value;
}
//删除答案
}else{
var ans = testAnswer[id].split("");
ans=ans.deleteValue(srcElement.value);
testAnswer[id]=ans.join("");
}
}

//记录答案进域中
for (d in testAnswer){
if (document.all.fld_TesterAnswer.value==""){
document.all.fld_TesterAnswer.value="'"+d+"'"+":'"+testAnswer[d]+"'";
}else{
document.all.fld_TesterAnswer.value+=","+"'"+d+"'"+":'"+testAnswer[d]+"'";
}
}

//更新表单中选择的试题答案
document.getElementById("question_"+id).value=testAnswer[id];
}
}
}
//校验是否完成所有题目的填写
function invalidTestComplete(){
var idList = document.all.fld_QuestionId.value.trim().split(",");
for (var i=0;i<idList.length;i++){
if (idList[i].trim()!=""){
var question = document.getElementById("question_"+idList[i].trim());
if (question.value.trim()==""){
alert("试题未全部完成，请完成后再提交。");
question.focus();
return;
break;
}
}
}
var temp = confirm("试卷提交后将不能进行修改，确认提交？");
if (!temp)return;
staticResult(idList);
}

//统计分数
function staticResult(idList){
eval("var answer = {"+document.all.fld_Answer.value+"}");
eval("var testerAnswer = {"+document.all.fld_TesterAnswer.value+"}");
var result={};
var totalPoint=0;
for (var i=0;i<idList.length;i++){
//取出正确答案
var iAnswer = answer[idList[i]][0];
//取出分数
var score = answer[idList[i]][1];
//取出答题人填写的答案
var iTesterAnswer = testerAnswer[idList[i]].trim();

//答案正确
if (iAnswer.split("").equal(iTesterAnswer.split(""))){
totalPoint+=parseInt(score);
//选择的答案，正确答案，本题分数，本题得分
result[idList[i]]=[iTesterAnswer,iAnswer,score,score]
//答案错误
}else{
//选择的答案，正确答案，本题分数，本题得分
result[idList[i]]=[iTesterAnswer,iAnswer,score,"0"]
}
}

//更新判题记录,得分
var checkResult=document.all.fld_CheckingResult;
checkResult.value="";
for (p in result){
checkResult.value+=checkResult.value.trim()==""?"'"+p+"':["+result[p].join(",")+"]":",'"+p+"':["+result[p].join(",")+"]"
}
var total=document.all.fld_TotalPoints;
total.value="";
total.value=totalPoint;
//保存文档
saveDoc();
}
//提交文档给代理保存

function saveDoc(){
/*
*url:请求的url
*method:请求方法
*parames:请求参数
*returnType:回调函数返回的响应数据类型
*callback:回调函数名
*errorcallback:错误处理回调函数名
*/
document.getElementById("submitbtn").disabled="true";
var url="/"+dbpath+"/(AG_SaveTestResult)?openagent"+"&random="+Math.random();
var paras ="";

paras+="&name="+document.all.fld_TesterName.value.trim();
paras+="&altname="+escape(document.all.fld_TesterALTName.value.trim());
paras+="&copltd="+escape(document.all.fld_TesterCopLtd.value.trim());
paras+="&tdept="+escape(document.all.fld_TesterDept.value.trim());
paras+="&deptno="+document.all.fld_TesterDeptNo.value.trim();
paras+="&testdate="+escape(document.all.fld_TestDate.value.trim());

paras+="&contestunid="+document.all.fld_ContestDocumentUNID.value.trim();
paras+="&questionid="+document.all.fld_QuestionId.value.trim();
paras+="&answer="+document.all.fld_Answer.value.trim();
paras+="&testeranswer="+document.all.fld_TesterAnswer.value.trim();
paras+="&result="+document.all.fld_CheckingResult.value.trim();
paras+="&totalpoints="+document.all.fld_TotalPoints.value.trim();
var xmlHttp = new XMLHTTP(url,"post",paras,"text",function(text){alert(text);window.opener=null;window.open("","_self");window.close();},function(){alert("保存出错，请联系管理员。")});
}

追问

你好，能提供一点前台的html代码吗？我想看看html的结构是怎么写的，谢谢！

追答

试题加载中，请稍等... ...

答题日期：

竞赛试题文档ID:

试题ID列表：

试题正确答案及单题分数：

考试人填写的答案:

判题记录：

追问

你好，还在吗？
刚我大概看了下你提供给我的代码，跟我想要的不符合！
我可能描述不清楚，不好意思！
我是做前端的，后台提供数据给我，我拿到数据展示出来。然后做题者把题目做好后，做题者点击提交【点击临时保存】把选好的答案传给后台，让后台去处理。我这边不做任何的逻辑处理！
至于分数的问题，也是后台提供接口给我，我展示出来就可以了！
请问这种该怎么做呢？谢谢！

追答

没关系，既然不是你想要的我应藏调。