通過點選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>

注意要寫上onsubmit=”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':'男'}})