Ajax

Ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）,AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

-----传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面；

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

Ajax工作原理：

1. 基本参数

  $.ajax，这个是JQuery对ajax封装的最基础步骤，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。看一下常用的参数：    

1 2 3 4 5 6 7 8 9 10 11

var configObj = {        method   //数据的提交方式：get和post        url   //数据的提交路径        async   //是否支持异步刷新，默认是true        data    //需要提交的数据        dataType   //服务器返回数据的类型，例如xml,String,Json等        success    //请求成功后的回调函数        error   //请求失败后的回调函数     }    $.ajax(configObj);//通过$.ajax函数进行调用。

2. 实例分析

1 2 3 4 5 6 7 8 9 10 11 12

$.ajax({     url: '/host',               // 数据提交地址     type: "POST",               // 提交类型     data: {'k1': 123, 'k2': "root"},        // 提交的内容 字典格式     success: function(data){　　　　// 客户端会一直等待服务端返回的数值             // data是服务器端返回的字符串         var obj = JSON.parse(data);     } })    建议：永远让服务器端返回一个字典 return HttpResponse(json.dumps(字典))

3. 简单的前后端交互

Ajax代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$(function(){     $('#ajax_submit').click(function () {         $.ajax({             url:"/test_ajax/",             type:"POST",             data:{'hostname':$('#host').val(),'ip':$('#ip').val(),'port':$('#port').val(),'b_id':$('#sel').val()},             success:function (data) {                 if(data=='OK'){                     location.reload()   // 重新加载页面                 }else {                     alert(data);                 }             }         })     }) })

Django代码：

1 2 3 4 5 6 7 8 9 10 11 12

def test_ajax(request):     print(request.method)     h = request.POST.get('hostname')     i = request.POST.get('ip')     p = request.POST.get('port')     b = request.POST.get('b_id')     print(h,i,p,b)     if h and len(h) > 5:        # 主机名长度判断         models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b) # 创建数据         return HttpResponse("OK")　　　　# 返回OK 严格大小写     else:         return HttpResponse("主机名太短")　　# 返回错误提示

4. 对前后端交互完善（当后端有问题时，前端收不到data，页面无反应）

Ajax代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$(function(){     $('#ajax_submit').click(function () {         $.ajax({             url:"/test_ajax/",             type:"POST",             data:{'hostname':$('#host').val(),'ip':$('#ip').val(),'port':$('#port').val(),'b_id':$('#sel').val()},             success:function (data) {                 console.log(data)    // data {"data": null, "status": false, "error": "u4e3bu673au540du592au77ed"}                 var obj = JSON.parse(data);     // 反序列化 把字符串data换成对象obj                                                 // 序列化 JSON.stringify() 把obj转换为字符串                 if(obj.status){                     location.reload()   // 重新加载页面                 }else {                     $('#error_msg').text(obj.error)                 }             }         })     }) })

Django代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

import json def test_ajax(request):     ret = {'status':True,'error':None,'data':None}  # 返回一个字典     try:         h = request.POST.get('hostname')         i = request.POST.get('ip')         p = request.POST.get('port')         b = request.POST.get('b_id')         print(h,i,p,b)         if h and len(h) > 5:        # 主机名长度             print("ok")             models.Host.objects.create(hostname=h,ip=i,port=p,b_id=b)         else:             ret['status'] = False             ret['error'] = '主机名太短'     except Exception as e:         ret['status'] = False         ret['error'] = '请求错误'     return  HttpResponse(json.dumps(ret))       # 对字典进行序列化

5. serialize自动获取表单数据

<form class="add-form" method="POST" action="/home/">
            <div class="group">
                <input id='host' type="text" placeholder="主机名" name="hostname" />
            </div>

            <div class="group">
                <input id='ip' type="text" placeholder="IP" name="ip" />
            </div>

            <div class="group">
                <input id='port' type="text" placeholder="端口" name="port" />
            </div>

            <div class="group">
                <select id='sel' name="b_id">
                    {% for op in b_list %}
                    <option value="{{ op.id }}">{{ op.caption }}</option>
                    {% endfor %}
                </select>
            </div>
            <input type="submit" value="提交" />
            <a id="ajax_submit">要上天提交</a>
            <input id="cancel" type="button" value="取消" />
            <span id="error_msg"></span>
</form>

Ajax代码：

1 2 3 4 5 6

$.ajax({     url:"/test_ajax/",     type:"POST",             data:$('.add-form').serialize(),  // 获取表单数据提交 必须是form表单     success:function (data) {         })

6. Ajax代码补充（traditional，dataType）

Ajax代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

$(function(){     $('#add_submit_ajax').click(function(){         $.ajax({             url: '/ajax_add_app',             data: {'user': 123,'host_list': [1,2,3,4]},             // data: $('#add_form').serialize(),             type: "POST",             dataType: 'JSON',       // 内部对传过来的数据直接执行JSON.parse 拿到的数据直接为对象而非字符串             traditional: true,      // 添加此项 当字典里包含列表时候，后端可以getlist到里面的数据             success: function(obj){                 console.log(obj);             },             error: function () {     // 未知错误时执行，指前端收不到后台发送的obj时，执行             }         })     }); })

Django代码：

1 2 3 4 5 6 7 8

def ajax_add_app(request):     ret = {'status':True, 'error':None, 'data': None}        app_name = request.POST.get('app_name')     host_list = request.POST.getlist('host_list')     obj = models.Application.objects.create(name=app_name)     obj.r.add(*host_list)     return HttpResponse(json.dumps(ret))