Django中ajax的GET与POST请求、JavaScript与jQuery

最新推荐文章于 2022-06-17 08:16:09 发布

原创

最新推荐文章于 2022-06-17 08:16:09 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #get #JavaScript #jQuery #post

ajax介绍

Ajax（Asynchronous Javascript And XML：异步 JavaScript 和 XML），是指一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。

但是Ajax可能破坏浏览器的后退与加入收藏书签功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。

Ajax的定义

Ajax有最初是由js编写的，后来随着js框架的发展，jq，vue等大型框架都对ajax进行了封装，在这里我们学习两种ajax的编写。

Js ajax

我们看一个简单的ajax案例

首先我们创建如图所示的一个项目：

代码如下：

# app01/views.py
from django.http import JsonResponse
from django.shortcuts import render


# Create your views here.
def getPage(request):
    '''返回页面'''
    return render(request,'django_ajax_pro.html')

def sendData(request):
    '''
    响应ajax请求，在这里要注意响应的内容是json对象
    '''
    return JsonResponse({"data":"hello world"})

#django_pro5/urls
from django.conf.urls import include, url
from django.contrib import admin

from app01.views import getPage, sendData

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^ckeditor/',include('ckeditor_uploader.urls')),

    url(r'ajaxPro/',getPage),
    url(r'ajaxData/',sendData),
]

<!--templates/django_ajax_pro.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax_js_example</title>
</head>
<body>
    <button onclick="getData()">按我呀</button>
    <script>
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //Msxml2版本Microsoft浏览器
        }catch (e){
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//Microsoft版本Microsoft浏览器
            }catch (e1){
                xmlhttp = new XMLHttpRequest();//非Microsoft浏览器，如：谷歌、Firefox等
            }
        }
        function updatePage() {
            console.log("+++++++++++++++++++++++++++++++++");
            console.log(xmlhttp.readyState);
            console.log(xmlhttp.status);
            console.log("+++++++++++++++++++++++++++++++++");
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    var response = xmlhttp.responseText;//返回响应的内容
                    console.log(response)
                }
        }
        function getData() {
            url = "/ajaxData/";
            xmlhttp.open("GET",url,true);
            xmlhttp.onreadystatechange = updatePage;
            xmlhttp.send(null)
        }
        console.log(xmlhttp)
    </script>
</body>
</html>

效果如下：

在这里我们关注上面的代码的几个点

1、在视图当中我们定义了两个函数，这里大家一定要搞明白，ajax是局部提交，首先我们需要有页面承载我们的前端效果，其次在前端发起ajax请求，进行响应的是一个独立的视图，并不是我们承载前端的视图。

2、ajax通常返回的数据是json数据，在老版本的Django当中需要先导入json模块，然后用HTTPRespose进行返回，在新版本django.http下已经封装好了一个叫做JsonResponse的功能，他返回的就是json数据

3、js 编写 ajax 的变化有很多种，但是一定注意他的必要的步骤，我们把刚才的代码拆开看一下

1. 构建XMLHttpRequest对象

try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //Msxml2版本Microsoft浏览器
        }catch (e){
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//Microsoft版本Microsoft浏览器
            }catch (e1){
                xmlhttp = new XMLHttpRequest();//非Microsoft浏览器，如：谷歌、Firefox等
            }
        }

2. 发起请求

function getData() {
            url = "/ajaxData/";
            xmlhttp.open("GET",url,true);
            xmlhttp.onreadystatechange = updatePage;
            xmlhttp.send(null)
        }

3. 进行回调，响应函数

function updatePage() {
            console.log("+++++++++++++++++++++++++++++++++");
            console.log(xmlhttp.readyState);
            console.log(xmlhttp.status);
            console.log("+++++++++++++++++++++++++++++++++");
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    var response = xmlhttp.responseText;//返回响应的内容
                    console.log(response)
                }
        }

在掌握了上面的例子之后，我们来解释一些需要记住的常识

Ajax对象readyState的五种状态

状态编号	状态	描述
0	未初始化	(XMLHttpRequest)对象已经创建，但还没有调用open()方法。值为0表示对象已经存在，否则浏览器会报错：对象不存在。
1	载入/正在发送请求	对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)，完成对象状态的设置。并调用send()方法开始向服务端发送请