投票系统 - 在线问卷调查平台
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>投票</title>
<link href="../js/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<script src="../layui/layui.js"></script>
<script src="../js/jquery/jQuery-2.2.0.min.js"></script>
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$.ajax({
async: false,
url: "/getAllVote",
type: "get",
dataType: "json",
success: function (data) {
console.log(data);
for (let i = 0; i < data.length; i++) {
<pre><code> let tr = $("<tr align=\"center\" ></tr>");
let td1 = $("<td></td>");
td1.append(data[i].vote_vid);
let td2 = $("<td></td>");
td2.append(data[i].vote_vtitled);
let td3 = $("<td></td>");
td3.html(data[i].vote_vcondition);
let td4 = $("<td></td>");
//layui-icon-praise
var dz = $("<button id=\"dz\" type=\"button\" data-toggle=\"modal\" data-target=\"#myModal1\" class=\"layui-btn layui-btn-warm layui-icon layui-icon-praise \"></button>")
var dwz = $("<button id=\"dwz\" type=\"button\" class=\"layui-btn layui-icon layui-icon-praise \"></button>")
var ck = $("<button type=\"button\" id='ck' class=\"layui-btn layui-btn-warm layui-icon layui-icon-face-smile \"></button>");
<!--data-toggle="modal" data-target="#myModal1"-->
dz.click(function () {
$("#tm").val(data[i].vote_vtitled);
$.ajax({
async: false,
url: "/getSubject",
type: "get",
dataType: "json",
data: {
vote_vid: data[i].vote_vid
},
success: function (data) {
// console.log(data);
for (let i = data.length - 1; i >= 0; i--) {
let timu = data[i];
let xuanXiang = "";
let inputType = "";
if (timu.subject_stype == "x") {
xuanXiang = "单选";
inputType = "radio";
} else if (timu.subject_stype == "t") {
xuanXiang = "多选";
inputType = "checkbox";
}
$.ajax({
async: false,
url: "/getAnswer",
type: "get",
dataType: "json",
data: {
subject_sid: timu.subject_sid
},
success: function (data) {
// console.log(data);
for (let j = 0; j < data.length; j++) {
let mm = data[j].answer_acontent
// $('.daan').val(data[j].answer_acontent);
var table = document.getElementById("tab");
// 在表格中插入一行【第一行插入】
var rows = table.insertRow(0);
var row = table.insertRow(0);
row.style.display = "block"; // 设置新行的display属性为block
var aa = row.insertCell(0);
aa.innerHTML = '<div style="display: block;" >' +\n '【<input type="text" value="' + xuanXiang + '" style="border: none;width: 50px; color: #00a2d4; white-space: nowrap; "disabled="disabled">】<span>' +\n timu.subject_scontent + '</span></div><br>';
var radio = rows.insertCell(0);
radio.innerHTML = '<input style="display:inline-block;float:left" class="checkbox" type="' + inputType + '" name="ra ' + i + '"><input class="daan" value="' + mm + '" style="border: none;" type="text" disabled="disabled" >' +\n '<br><input style="display:inline-block;float:left" class="checkbox" type=' + inputType + ' name="ra ' + i + '"><input class="daan" value="' + mm + '" type="text" style="border: none;" disabled="disabled" > <br><br> ';
}
}
});
}
}
});
});
if (data[i].vote_vcondition === "已结束") {
td4.append(dz)
} else {
td4.append(ck)
}
dwz.click(function () {
alert("此问卷已投票，不能再投票！！！")
})
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
$("#table").append(tr);
}
}
})
$("#tjwt").click(function () {
/*var checkboxes = document.querySelectorAll('input[type="inputType"]');
var inputs = document.querySelectorAll('input[type="text"]');
// 遍历输入框元素
for (var i = 0; i < inputs.length; i++) {
// 获取输入框的value值
var inputValue = inputs[i].value;
// 将输入框的value值赋值给前面的复选框的value值
if (i > 0) {
checkboxes[i - 1].value = inputValue;
}
}*/
var checkboxes = document.querySelectorAll('input[class="checkbox"]');
var inputs = document.querySelectorAll('input[class="daan"]');
// 遍历复选框和输入框元素，将输入框的value值赋值给前面的复选框的value值
for (var x = 1; x < checkboxes.length; x += 2) {
if (inputs[x]) {
checkboxes[x - 1].value = inputs[x].value;
}
// console.log(checkboxes[x - 1].value)
}
var selectedValues = [];
// 遍历复选框元素，判断是否被选中，如果被选中则将其value值添加到数组中
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
selectedValues.push(checkboxes[i].value);
}
}
console.log(selectedValues);
})
})
</code></pre>
</script>
<div class="layui-table">
<table id="table" class="layui-table " align="center">
<thead>
<tr align="center">
<td>问卷ID</td>
<td>问卷标题</td>
<td>问卷状态</td>
<td>操作</td>
</tr>
</thead>
</table>
</div>
<div class="modal fade " id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width: 800px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title" id="myModalLabel1" style="color:red">为【<input type="text" id="tm"
style="border: none;" disabled="disabled">】统计结果
</h2>
</div>
<div class="modal-body">
<h3>
<table id="tab">
<pre><code> </table>
</h3>
<br><br><br>
<button id="tjwt" type="button" class="layui-btn layui-btn-warm ">提交</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</code></pre>
</div>
</body>
</html>为什么循环出来的mm会被生成两遍内容：在代码中，mm被生成两遍的原因是因为在循环中使用了两个嵌套的ajax请求，而ajax是异步请求，无法保证执行的顺序。在第一个ajax请求中，执行了一个循环，循环中每次都会发起一个ajax请求来获取答案数据。由于ajax是异步请求，所以第一个ajax请求发出后，不会等待答案数据返回，而是继续执行下一次循环。当答案数据返回时，循环已经执行到下一次了，所以答案数据会被生成两次。
<p>要解决这个问题，可以使用同步请求来获取答案数据，这样就可以保证循环中的每次请求都能够等待数据返回后再执行下一次循环。将第二个ajax请求的async设置为false即可：</p>
<pre><code class="language-javascript">$.ajax({
async: false,
url: "/getAnswer",
type: "get",
dataType: "json",
data: {
subject_sid: timu.subject_sid
},
success: function (data) {
// code here
}
});
</code></pre>
<p>这样就可以确保答案数据只会被生成一次。</p>
原文地址: https://www.cveoy.top/t/topic/p12Z 著作权归作者所有。请勿转载和采集!