通过点击form的查询按钮,请求后台数据,并生成表格添加到table中
先来一段简单的html的form和table:
<form onsubmit="return false" id="formAddtr" method="post">
<input type="text" name="id">
<button id="select1" onclick="subForm()">查询</button>
</form>
<table>
<thead>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</thead>
<tbody id="test">
</tbody>
</table>
注意要写上οnsubmit=”return false”,防止表单提交,因为ajax会提交,如果不写就重复提交了,会出现响应结果,但是闪一下又没了的情况
接下来是js代码ajax:
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
//别忘了导入该用的js文件
function subForm() {
$.ajax({
url: '/data/', //请求的url
type: 'post', //请求的方式
data: $('#formAddtr').serialize(), //form表单里要提交的内容,里面的input等写上name就会提交,这是序列化
error:function (data) {
alert('请求失败');
},
success:function (data) {
var str1 = "";
//清空table中的html
$("#test").html("");
for(var i = 0;i<data.data.length;i++){
str1 = "<tr>" +
"<td>"+data.data[i].user_id + "</td>" +
"<td>"+data.data[i].user_id + "</td>" +
"<td>"+data.data[i].user_id + "</td>" +
"</tr>";
$("#test").append(str1);
}
}
});
}
</script>
接下来是后台py文件,返回数据给前台
def data(request):
return JsonResponse({'data':{'name':'小明','age':10,'male':'男'}})