Django中Ajax的使用

一、前端代码

1、js实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function ajax1()
        {
            var request;
            if(window.XMLHttpRequest)            //首先创建XHR对象
            {
                request = new XMLHttpRequest();  //IE7+,Firefox,Chrome,Qpera,Safari
            }
            else
            {
                request =new ActiveObject("Microsoft.XMLHTTP");   //兼容IE5,IE6
            }
            //1、"GET"方法
            request.open("GET","url_1/",true)     //初始化一个请求
            request.send();                      //将请求发送到服务器
            //2、"POST"方法
            //request.open("POST","url_2/",true)
            //request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //设置http的头信息，告诉web服务器要发送一个表单
            //request.send("name=小明&age=11"); 
            request.onreadystatechange = function()
            {
                if(request.readyState===4 && request.status===200)
                {

                    var text = request.responseText;
                    document.getElementById("div1").innerHTML= text;
                }
            }
        }

    </script>
</head>
<body>
    <input type="button" value="点一下" onclick="ajax1()">
    </br>
    <div id="div1"></div>
</body>
</html>

上面的代码除了注释另外再做一些解释：

a、open(method,url,async) 初始化一个请求

-mothod：发送请求方法(GET, POST)

-url：请求地址(相对地址、绝对地址)

-async：请求同步(false)/异步(true默认)（ajax一般使用异步请求）

open方法中URL也可以传递参数，和其他url传递参数的使用方法一致，如果不了解可以参考这篇博客：

Django URL传递参数的方法总结

b、send(string) 将请求发送到服务器

在使用get方法时，参数都填写在url中，因此string可以不填写或null

如果是post方法，则一定要填写参数

c、onreadystatechange事件对服务器响应进行监听

当request.readyState===4 && request.status===200时，说明后端数据返回正常，然后就可以通过XMLHttpRequest.responseText来获取后端传来的数据。其他获取数据的方法或属性还有：

·responseText：获得字符串形式的响应数据

·responseXML：获得XML形式的响应数据(现在比较少，一般使用JSON的格式)

·status和statusText：以数字和文本形式返回HTTP状态码

·getAllResponseHeader()：获取所有的响应报头

·getResponseHeader(xxx)：查询响应中的某个字段的值

2、jquery实现（jquery中实现好像更方便，等我学完再来更，网上也有许多资料可以自行查阅）

二、后端代码

1、url.py

urlpatterns = [
    url(r'^url_1/$', views.myAjax1, name='myAjax1'),
    url(r'^url_2/$', views.myAjax2, name='myAjax2'),
]

2、views.py

from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt

def myAjax1(request):
    return HttpResponse("helloworld!")

@csrf_exempt
def myAjax2(request):
    if request.method == 'GET':
        return HttpResponse("lalala")
    else:
        name = request.POST.get('name', '')
        age = request.POST.get('age', '')
        return HttpResponse(name+age)

装饰器@csrf_exempt的功能是取消当前函数防跨站请求伪造功能。因为我网上找了很多Ajax添加csrf验证都是通过jQuery来实现的，我还没学jQuery，用js来实现csrf验证网上又找不到资料，因此在这里就先不用csrf验证。在jQuery代码中我会添加csrf验证。

一、前端代码

二、后端代码

猜你喜欢