Ajax请求示例

Posted 2020-08-26 李瑞鑫

模板

 1                 {% for row in host_list %}
 2                 <tr>
 3                     <td class="c1">{{ row.id }}</td>
 4                     <td>{{ row.servername }}</td>
 5                     <td>{{ row.serverip }}</td>
 6                     <td>{{ row.serverpassword }}</td>
 7                     <td>编辑</td>
 8                     <td class="i1">删除</td>
 9                 </tr>
10                 {% endfor %}
11                 </table>
12         </div>
13     </div>
14 
15 <script src="/static/jquery-3.1.1.js"></script>
16 <script>
17     $(".i1").each(function () {
18         $(this).click(function () {
19             var b = $(this).parent().find("td").get(0).innerText;
20             console.log(b);
21             $(this).parent().remove();
22             $.ajax({
23                 url:‘/host-ajax‘,
24                 type:"POST",
25                 data:{"id":b},
26                 success:function (data) {
27                     var obj = JSON.parse(data);
28                     alert(obj.data)
29                 }
30             })
31         })
32     })
33 </script>

路由系统

1 url(r‘^host-ajax‘, views.host_ajax),

视图函数

 1 def host_ajax(request):
 2     import  json
 3     res = {"status":True,"error":None,"data":None}
 4     try:
 5         if request.method =="POST":
 6             print("执行 post方法 》》")
 7             nid = request.POST.get("id")
 8             print("nid:>>>",nid)
 9             models.HostInfo.objects.filter(id=nid).delete()
10             res["data"] = "delete success"
11         else:
12             pass
13     except Exception as e:
14         res["status"]= False
15         res["error"] = "rquest error"
16     return HttpResponse(json.dumps(res))

Ajax 

 

　　　　        $.ajax({
            url: ‘/host‘,                                                #要提交到那个URL，触发那个函数
            type: "POST",                                             #提交方式
            data: {‘k1‘: 123,‘k2‘: "root"},                      #提交的数据
            success: function(data){                             #回调函数，即只有服务器端返回信息以后会自动执行，必要带一个参数，这个参数代表服务端返回的字典
                // data是服务器端返回的字符串
                var obj = JSON.parse(data);                    #把服务器端返回的字符串变成一个json字典的格式对象
            }
        })
        
    
        建议：永远让服务器端返回一个字典
        
        return HttpResponse(json.dumps(字典))