ajax异步请求，生成表格，局部刷新

通过点击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':'男'}})