Ajax

Ajax

一、概述

Ajax ( Asynchronous Javascript And XML )翻译成中文就是“异步的Javascript和XML"。即使用Javascript语言与服务器进行异步交互，传输的数据为XML (当然，传输的数据不只是XML )。

Ajax最大的优点就是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

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

二、应用场景

Ajax技术常见应用场景：根据用户输入的关键字，自动提示检索关键字。还有就是注册时候的用户名的查重，当输入框发现变化时，使用Ajax技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。

• 整个过程中页面没有刷新，只是刷新页面中的局部位置而已；
• 当请求发送后，浏览器还可以进行其他操作，无需等待服务器的响应。

三、Ajax格式

$.ajax({            
    url:'',  #url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交
    type:'POST',  #type为标定你这个ajax请求的方法
    data:{'k1':'v1'},  #data后面跟的就是你提交给后端的数据
    success:function (arg) {  #success为回调函数，参数arg即后端给你返回的数据,arg是字符串
       #函数体 
    }
})

参数arg都是字符串类型，不过有些是通过对象序列化生成的字符串，这时我们需要反序列成对象，方便我们使用，有两种方法可以实现。

第一种：

$.ajax({            
    url:'',  #url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交
    type:'POST',  #type为标定你这个ajax请求的方法
    data:{'k1':'v1'},  #data后面跟的就是你提交给后端的数据
    success:function (arg) {  #success为回调函数，参数arg即后端给你返回的数据,arg是字符串
       var obj = JSON.parse(arg)  #使用JavaScript内置方法，将一个JSON字符串转换为JavaScript对象
       #函数体 
    }
})

第二种：

$.ajax({            
    url:'',  #url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交
    type:'POST',  #type为标定你这个ajax请求的方法
    data:{'k1':'v1'},  #data后面跟的就是你提交给后端的数据
    dataType：'JSON' ,
    success:function (arg) {  #success为回调函数，参数arg即后端给你返回的数据,arg是对象
       #函数体 
    }
})

四、$.ajax参数

data参数中的键值对，如果值不为字符串，需要将其转换成字符串类型。

1.列表

$.ajax({
    url: '',
    type: 'GET',
    data: {'k1':[1,2,3,4]},
    dataType: 'JSON',
    traditional: true,
    success:function(arg){
        #函数体
    }
})

2.字典

$.ajax({
    url: '',
    type: 'GET',
    data: {'k1':JSON.stringify({})},   #JSON.stringify()用于将JavaScript对象转换为JSON字符串
    dataType: 'JSON',
    success:function(arg){
        #函数体
    }
})

五、序列化

关于Django中的序列化主要应用在将数据库中检索的数据返回给客户端用户，特别的Ajax请求一般返回的为Json格式。

1.json.dumps

json.dumps()用于将python对象转换字符串类型。

import json
def del_students(request):
    ret = {'status':True}
    try:
        nid = request.GET.get('nid')
        models.Student.objects.filter(id=nid).delete()
    except Exception as e:
        ret['status'] = False
    return HttpResponse(json.dumps(ret))

2.serializers

def get_data(request):
    ret = {'status':True,'data':None}
    try:
        # user_list = models.UserInfo.objects.all()
        # ret['data'] = serializers.serialize("json",user_list)  #原来user_list是QuerySet对象，内包含对象，不能被dumps，所以转化成json格式的字符串
        #前端
        #var v = JSON.parse(arg.data);
        #console.log(v)

        user_list = models.UserInfo.objects.all().values('id','username')
        ret['data'] = list(user_list)
        #前端
        #console.log(arg.data)

        user_list = models.UserInfo.objects.all().values_list('id','username')
        ret['data'] = list(user_list)
        #前端
        #console.log(arg.data)

    except Exception as e:
        ret['status'] = False
    return HttpResponse(json.dumps(ret))