52,780
社区成员
发帖
与我相关
我的任务
分享菜鸟求问，求大神解答！
在做一个很简单的考试系统，现在需要用ajax判断提交答案和正确答案是否一致，相同的话可以继续下一题，不相同的话给出提示，并阻止点击下一题按钮的操作。求问该怎么做，真不会了。。。
...全文
请发表友善的回复…
发表回复
菜鸟老五 2020-03-10
- 打赏
- 举报
<!DOCTYPE html>
<html>
<!-- 思路就是这个样子 -->
<!-- 1首先获取到数据，题目答案 -->
<!-- 2获取用户选择或者输入的答案跟考试题目以及答案去比较（当然这里指前端虚拟数据），
如果是请求后台判断，直接传递用户输入的答案跟当前题目就OK -->
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<style>
[v-cloak]{
display: none
}
</style>
<body>
<div class="pages">
<div class="mui-content" id="app">
问题：
<div v-for="item in list" :key="item" v-cloak>
{{item.question}}
</div>
输入答案：
<input type="text" v-model="answer">
<button v-on:click="next()">下一步</button>
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" charset="utf-8">
new Vue({
el: '#app',
data: {
answer:"11111",
list: [
{
"id": "1101",
"question": "模拟数据可以用mock吗？",
"answer": "必须可以"
}
]
},
mounted() {
console.log("1111=>", this.list);
},
methods: {
next(){
console.log("获取用户输入数据====>",this.answer);
// 这里声明由于数据只是虚拟数据，所以前端暂时循环判断就可以
/**如果是后台接口，直接把用户输入的答案作为参数就可以 **/
for(var i in this.list){
if(this.list[i].answer==this.answer){
alert("回答正确");
}else{
alert("回答错误");
}
}
}
}
})
</script>
</body>
</html>
前端_小菜鸟 2020-01-07
- 打赏
- 举报
请求回调,返回是否成功,根据返回值判断再操作啊,这个是最基本的东西,比如
$.ajax({
type: 'get',
.....,
success:function(res){
if(res.code == 200){
跳到下一题
}else{
alert("答错了")
}
}
})
HouGISer 2020-01-06
- 打赏
- 举报
前端用ajax发送提交的答案json，后端接收并判断与正确答案是否一致，并返回判断结果，前端接收结果，根据结果做不同响应
