Django 通过JS实现ajax过程详解

最新推荐文章于 2022-05-24 21:16:26 发布

wx1871428

最新推荐文章于 2022-05-24 21:16:26 发布

阅读量358

点赞数

本文链接：https://blog.csdn.net/wx1871428/article/details/117752506

版权

本文详细讲解了如何使用JavaScript与Django框架实现AJAX请求，包括AJAX的优点、不同请求方式、XMLHttpRequest对象的使用、状态管理及同源策略与JSONP的介绍。通过实例展示了在Django中处理AJAX请求的方法，帮助开发者理解并掌握AJAX的实践应用。

摘要由CSDN通过智能技术生成

ajax的优缺点

AJAX使用Javascript技术向服务器发送异步请求

AJAX无须刷新整个页面

因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高

小练习：计算两个数的和

方式一：这里没有指定contentType：默认是urlencode的方式发的

index.html


    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width">
      <title>Title</title>
      <script src="/static/jquery-3.2.1.min.js"></script>
      <script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></script>
    </head>
    <body>
    <h1>计算两个数的和，测试ajax</h1>
    <input type="text" class="num1">+<input type="text" class="num2">=<input type="text" class="ret">
    <button class="send_ajax">sendajax</button>
    
    <script>
      $(".send_ajax").click(function () {
   
         $.ajax({
   
          url:"/sendAjax/",
          type:"post",
          headers:{
   "X-CSRFToken":$.cookie('csrftoken')},  
          data:{
   
            num1:$(".num1").val(),
            num2:$(".num2").val(),
          },
          success:function (data) {
   
            alert(data);
            $(".ret").val(data)
          }
        })
      })
    
    </script>
    </body>
    </html>

**views.py
**


    def index(request):
      return render(request,"index.html")
    
    def sendAjax(request):
      print(request.POST)
      print(request.GET)
      print(request.body) 
      num1 = request.POST.get("num1")
      num2 = request.POST.get("num2")
      ret = float(num1)+float(num2)
      return HttpResponse(ret)

方式二：指定conentType为json数据发送：


    <script>
      $(".send_ajax").click(function () {
   
         $.ajax({
   
          url:"/sendAjax/",
          type:"post",
          headers:{
   "X-CSRFToken":$.cookie('csrftoken')},  //如果是json发送的时候要用headers方式解决forbidden的问题
          data:JSON.stringify({
   
            num1:$(".num1").val(),
            num2:$(".num2").val()
          }),
          contentType:"application/json", //客户端告诉浏览器是以json的格式发的数据，所以的吧发送的数据转成json字符串的形式发送
          success:function (data) {
   
            alert(data);
            $(".ret").val(data)
          }
        })
      })
    
    </script>

views.py


    def sendAjax(request):
      import json
      print(request.POST) #<QueryDict: {}>
      print(request.GET)  #<QueryDict: {}>
      print(request.body) #b'{"num1":"2","num2":"2"}' 注意这时的数据不再POST和GET里，而在body中
      print(type(request.body.decode("utf8"))) # <class 'str'>
      # 所以取值的时候得去body中取值，首先得反序列化一下
      data = request.body.decode("utf8")
      data = json.loads(data)
      num1= data.get("num1")
      num2 =data.get("num2")
      ret = float(num1)+float(num2)
      return HttpResponse(ret)

JS实现的ajax

其实AJAX就是在Javascript中多添加了一个对象：XMLHttpRequest对象。所有的异步交互都是使用XMLHttpServlet对象完成的。也就是说，我们只需要学习一个Javascript的新对象即可。


    var xmlHttp = new XMLHttpRequest()；//（大多数浏览器都支持DOM2规范）

注意，各个浏览器对XMLHttpRequest的支持也是不同的！为了处理浏览器兼容问题，给出下面方法来创建XMLHttpRequest对象：


    function createXMLHttpRequest() {
   
        var xmlHttp;
        // 适用于大多数浏览器，以及IE7和IE更高版本
        try{
   
          xmlHttp = new XMLHttpRequest();
        } catch (e) {
   
          // 适用于IE6
          try {
   
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (e) {
   
            // 适用于IE5.5，以及IE更早版本
            try{
   
              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
   }
          }
        }      
        return xmlHttp;
      }

**二、使用流程
**

1、打开与服务器的连接（open）

当得到XMLHttpRequest对象后，就可以调用该对象的open()方法打开与服务器的连接了。open()方法的参数如下：

open(method, url, async)：

method：请求方式，通常为GET或POST；

url：请求的服务器地址，例如：/ajaxdemo1/AServlet，若为GET请求，还可以在URL后追加参数；

async：这个参数可以不给，默认值为true，表示异步请求；

2、发送请求

当使用open打开连接后，就可以调用XMLHttpRequest对象的send()方法发送请求了。send()方法的参数为POST请求参数，即对应HTTP协议的请求体内容，若是GET请求，需要在URL后连接参数。

注意：若没有参数，需要给出null为参数！若不给出null为参数，可能会导致FireFox浏览器不能正常发送请求！

xmlHttp.send(null);

**3、接收服务器的响应（5个状态，4个过程）
**

当请求发送出去后，服务器端就开始执行了，但服务器端的响应还没有接收到。接下来我们来接收服务器的响应。

XMLHttpRequest对象有一个onreadystatechange事件，它会在XMLHttpRequest对象的状态发生变化时被调用。下面介绍一下XMLHttpRequest对象的5种状态：

0：初始化未完成状态，只是创建了XMLHttpRequest对象，还未调用open()方法；

1：请求已开始，open()方法已调用，但还没调用send()方法；

2：请求发送完成状态，send()方法已调用；

3：开始读取服务器响应；

4：读取服务器响应结束。

onreadystatechange事件会在状态为1、2、3、4时引发。

下面代码会被执行

最低0.47元/天解锁文章

wx1871428

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Django 通过JS实现ajax过程详解

ajax的优缺点AJAX使用Javascript技术向服务器发送异步请求AJAX无须刷新整个页面因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高小练习：计算两个数的和方式一：这里没有指定contentType：默认是urlencode的方式发的index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
复制链接

扫一扫