ajax介绍详解编程语言

如果django要返回数据给ajax，则必须要用httpsponse来返回

ajax的特点：异步和局部刷新

一、javascript实现ajax

1、先看如何实现get的方法

a、先创建一个xmlrequest对象的函数，方便后面创建xmlrequest对象，这个函数的返回值就是xmlrequest对象，通过XMLHttpRequest创建对象

            function createxmlrequest() { 
                var xmlhttp = new XMLHttpRequest(); 
                return xmlhttp 
            }

b、通过调用createxmlrequest函数，接收函数的返回值，获取我们要的对象

var xmlhttp = createxmlrequest()

c、调用open函数，表明我们要和哪个url通信，通过什么方式通信

xmlhttp.open("GET","/ajax_receive/",true)

d、因为我们是用get方式，所有不需要传输数据，但是最好写一个send函数，不然有的浏览器会报错，send函数的参数搞一个null

xmlhttp.send(null)

e、调用onreadystatechange方法监听服务端的返回信息

            xmlhttp.onreadystatechange=function () { 
                alert(xmlhttp.status) 
                alert(xmlhttp.readyState) 
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
{#                    这里的if判断一般都是写死这样的，不用关心#} 
                    var data = xmlhttp.responseText; 
                    alert(data) 
                } 
            }

我们看下实际的演示的代码

先看html的代码

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
    <input type="button" value="ajax" onclick="test()"> 
</body> 
    <script> 
 
        function test() { 
            function createxmlrequest() { 
                var xmlhttp = new XMLHttpRequest(); 
                return xmlhttp 
            } 
            var xmlhttp = createxmlrequest() 
            xmlhttp.open("GET","/ajax_receive/",true) 
			 
            xmlhttp.send(null) 
} 
            xmlhttp.onreadystatechange=function () { 
                alert(xmlhttp.status) 
                alert(xmlhttp.readyState) 
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
{#                    这里的if判断一般都是写死这样的，不用关心#} 
                    var data = xmlhttp.responseText; 
                    alert(data) 
                } 
            } 
        } 
 
    </script> 
 
</html>

在url中的代码，我们上面ajax_receive这个url进行通信

urlpatterns = [ 
    url(r'^admin/', admin.site.urls), 
    url(r'^index/', views.index), 
    url(r'^ajax_receive/', views.ajax_receive), 
    url(r'^ajax_register/', views.ajax_register), 
]

然后在看我们的视图函数，我们的视图函数返回一个“haha”

def ajax_receive(request): 
    if request.method.lower() == "post": 
        print("--------------->",request.POST) 
    return HttpResponse("haha")

先访问页面

点击按钮触发ajax函数

拿到后台的返回数据

二、我们在下基于javascript的ajax实现POST方式

a、还是创建一个函数，这个函数用来创建xmlrequest对象，和get的方式是一样的

            function createxmlrequest() { 
                var xmlhttp = new XMLHttpRequest(); 
                return xmlhttp 
            }

b、创建对象

var xmlhttp = createxmlrequest();

c、创建要通信的url和方式

xmlhttp.open("post","/ajax_register/",true);

d、如果是post方式，这段话必须加上，放在open后面的send的前面

xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

e、发送数据

xmlhttp.send("name=alex");

我们可以通过使用+号做字符串拼接。传递一个变量进去

xmlhttp.send("name="+alex)

f、还是做监听

            xmlhttp.onreadystatechange=function () { 
                alert(xmlhttp.status) 
                alert(xmlhttp.readyState) 
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
                    这里的if判断一般都是写死这样的，不用关心 
                    var data = xmlhttp.responseText; 
                    alert(data) 
                } 
            }

我们在实际测试，先看下前端的html代码

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
    <input type="button" value="ajax" onclick="test()"> 
</body> 
    <script> 
        function test() { 
            function createxmlrequest() { 
                var xmlhttp = new XMLHttpRequest(); 
                return xmlhttp 
            } 
 
            var xmlhttp = createxmlrequest(); 
            xmlhttp.open("post","/ajax_register/",true); 
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
{#            这个必须要放在send的前面，且在open后面，设定post的请求头部的格式#} 
            xmlhttp.send("name=alex"); 
 
            xmlhttp.send("name="+alex) 
{#            这个意思是要传递一个变量,用+号连接#} 
 
            xmlhttp.onreadystatechange=function () { 
                alert(xmlhttp.status) 
                alert(xmlhttp.readyState) 
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
                    这里的if判断一般都是写死这样的，不用关心 
                    var data = xmlhttp.responseText; 
                    alert(data) 
                } 
            } 
        } 
    </script> 
</html>

在看url文件

urlpatterns = [ 
    url(r'^admin/', admin.site.urls), 
    url(r'^index/', views.index), 
    url(r'^ajax_receive/', views.ajax_receive), 
    url(r'^ajax_register/', views.ajax_register), 
]

在看视图函数

def ajax_register(request): 
    if request.method == "POST": 
        username = request.POST.get("name") 
        print("------------>",username) 
        if username == "alex": 
            return HttpResponse("same") 
        else: 
            return HttpResponse("no same") 
    else: 
        return render(request,"regiser.html")

我们实际测试，看下后台是否能接受到前台发的数据，可以看到后台可以接受到前台的数据，且可以接受到POST请求

至此，基于javascript实现的ajax的我们就介绍完了，后面我们重点学习基于jquery的ajax

二、插播一个js中json对象

js的字符串是双引号的，且必须是双引号，而在python，字符串可以是单引号，也可以双引号的，我们先看下面的一个例子

如果我们在视图函数中返回一个字典，我们在前端怎么才能接受到呢？

先看前端的代码

            $.post("/jquery_func/",{name:"zhouyongbo"},function (data) { 
                console.log(data) 
                console.log(typeof data) 
            })

在看视图函数

def jquery_func(request): 
    temp_dict = {"age":"zhouyongbo"} 
    if request.method == "POST": 
        print("-----------------POST--------->",request.POST) 
    else: 
        print("-----------------GET--------->",request.GET) 
    return HttpResponse(temp_dict)

我们前端测试，看下返回的data和type of data到底是什么，是一个字典的k和字符串，所以我们没有接受视图函数返回的字典

我们在修改一次视图函数的返回值，我们在视图函数中导入json模块，然后返回值用json.dumps处理

def jquery_func(request): 
    temp_dict = {"age":"zhouyongbo"} 
    if request.method == "POST": 
        print("-----------------POST--------->",request.POST) 
    else: 
        print("-----------------GET--------->",request.GET) 
    return HttpResponse(json.dumps(temp_dict))

看下前端的代码

            $.post("/jquery_func/",{name:"zhouyongbo"},function (data) { 
                console.log(data) 
                console.log(typeof data) 
                console.log(data["name"]) 
            })

前端再次访问测试，前端确实拿到后端传的数据了，但是并我们要想要的字典，也就是js中的object，通过键值对并不能拿到key和values的值

其实我们还需要在前端代码中也要使用json处理处理下，具体看下代码，这个parse就相当于python中的loads

            $.post("/jquery_func/",{name:"zhouyongbo"},function (data) { 
                console.log(data); 
                console.log(typeof data); 
                data1 = JSON.parse(data); 
                console.log(data1["age"]); 
                console.log(typeof data1); 
            })

三、介绍下$.ajax方法

{#            下面学习一下$.ajax#} 
{#            1、$.ajax有两种表现形式，也就是说有两种传参的方式，第一种就是所有的参数放在一个大括号里，第二种方式是url作为一个单独的参数，而其他的#} 
{#            所有的参数在放在一个大括号里#} 
{#            #} 
{#            $.ajax({#} 
{#                #} 
{#            })#} 
{#            #} 
{#            $.ajax("url",{})#} 
 
{#            2、下面介绍$.ajax参数#} 
 
{#            1、data#} 
{##} 
{#            data:{#} 
{#                a:23,#} 
{#                b:34,#} 
{#            }#} 
 
{#            2、url#} 
{##} 
{#            3、type#} 
            function test() { 
                $.ajax({ 
                    url:"/jquery_func/", 
                    type:"POST", 
                    data:{ 
                        name:"cuihaoran", 
{#                        age:{school:"hnust",add:"changsha"}#} 
                        age:[12,34,56] 
                    }, 
                    traditional:true, 
                    dataType:"json", 
                    success:function (data) { 
                        console.log(data) 
                    }, 
                    error:function (data) { 
                        console.log(data) 
                    }, 
                    complate:function (data) { 
                        console.log(data) 
                    }, 
                     
 
                }) 
            } 
 
{#                traditional:true,#} 
{#                如果传输的数据是这样的#} 
{#                a:["a","c","c"]，则后台接受的数据就会有问题，如果有这样的情况就是就需要#} 
{#                把traditional加上,默认写上吧#} 
 
 
 
{##} 
{#                contentType:Text#} 
{#                contentType就是浏览器告诉后端，我传输的数据的类型#} 
 
 
 
{#                processData:false#} 
{#                processData的值为true则会转码,如果为false就是不要转码，可以忘记#} 
{#            })#} 
{#        }#} 
 
    </script>

ajax中的几个函数在补充一下

  function ajax() { 
            $.ajax( 
                { 
                    url:"/app1/ajax/", 
 
                    type:"POST", 
{#                    data:{#} 
{#                        a:"100",#} 
{#                        b:"200"#} 
{#                    },#} 
 
                    data:{ 
                        a:"1001", 
                        b:["aaaa","bbbb"] 
                    }, 
 
                    traditional:true, 
                    datatye:"json", 
                    success:function (data) { 
                        data = JSON.parse(data) 
                        console.log(data) 
                        console.log(typeof data) 
                    }, 
                    error:function () { 
                        console.log(arguments) 
                    }, 
{#                    complete:function () {#} 
{#                        console.log(arguments)#} 
{#                        console.log("hahha")#} 
{#                    },#} 
                    statusCode:{ 
                        "400":function () { 
                            console.log("400") 
                        }, 
                        "500":function () { 
                            console.log("500") 
                        } 
                    } 
                } 
            ) 
        } 
    </script>

这个的意思，后端必须要要给传我传递json格式的字符串

这个的意思是如果这次请求和返回都成功，则执行success对应的函数

这个的意思是如果这次请求和返回有一个失败，则执行error对应的函数

这个的意思是，无论成功失败与否都会执行complete对应的函数

还可以指定不同的返回码执行不同的函数

如果返回码是400，则执行400对应的函数，如果返回码是500.则执行500对应的函数

————————————————————————————————————————————

如果ajax需要一个json的对象，则后端返回的时候，就需要用json.dumps来处理这个对象

在前端可以用JSON,parse来处理后端返回的对象

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/20831.html