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

news/2024/7/10 22:39:10 标签: 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()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。 

2

载入完成/数据接收

此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示send()方法执行完成，已经接收完全部响应数据。并为下一阶段对数据解析作好准备。 

3

交互/解析数据

此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。值为3表示正在解析数据。

4

后台处理完成

此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。

Ajax对象status状态码（web request 请求响应码）

200：请求成功（后台处理结果ok）

状态码

描述

200

服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。

201

请求成功且服务器已创建了新的资源。

202

服务器已接受了请求，但尚未对其进行处理。

203

服务器已成功处理了请求，但返回了可能来自另一来源的信息。

204

服务器成功处理了请求，但未返回任何内容。

205

服务器成功处理了请求，但未返回任何内容(与 204 响应不同，此响应要求请求者重置文档视图（例如清除表单内容以输入新内容）。)

206

服务器成功处理了部分 GET 请求。

303：重定向 

状态码

描述

300

服务器根据请求可执行多种操作。

301

请求的网页已被永久移动到新位置。服务器返回此响应时，会自动将请求者转到新位置。

302

服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

303

当请求者应对不同的位置进行单独的 GET 请求以检索响应时，服务器会返回此代码。

304

自从上次请求后，请求的网页未被修改过。服务器返回此响应时，不会返回网页内容。

305

请求者只能使用代理访问请求的网页。

307

服务器目前正从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

400：请求错误

状态码

描述

400

服务器不理解请求的语法。

401

此页要求授权。您可能不希望将此网页纳入索引。

403

服务器拒绝请求。

404

服务器找不到请求的网页。例如，对于服务器上不存在的网页经常会返回此代码。

405

禁用请求中指定的方法。

406

无法使用请求的内容特性响应请求的网页。

407

此状态码与 401 类似，但指定请求者必须授权使用代理。如果服务器返回此响应，还表示请求者应当使用代理。

408

服务器等候请求时发生超时。

409

服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。     

410

请求的资源永久删除后，服务器返回此响应。

411

服务器不接受不含有效内容长度标头字段的请求。

412

服务器未满足请求者在请求中设置的其中一个前提条件。

413

服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。

414

请求的 URI（通常为网址）过长，服务器无法处理。

415

请求的格式不受请求页面的支持。

416

如果页面无法提供请求的范围，则服务器会返回此状态码。

417

服务器未满足"期望"请求标头字段的要求。

500：服务器错误

状态码

描述

500

服务器遇到错误，无法完成请求。

501

服务器不具备完成请求的功能。

502

服务器作为网关或代理，从上游服务器收到了无效的响应。

503

目前无法使用服务器（由于超载或进行停机维护）。通常，这只是一种暂时的状态。

504

服务器作为网关或代理，未及时从上游服务器接收请求。

505

服务器不支持请求中所使用的 HTTP 协议版本。

上面是js ajax get最简单的案例，接下来看一个完整的js ajax的请求案例，我们以后端校验用户名是否重复为例。

首先我们先定义一个列表作为用户池，用来存放已经存在的用户名，当然，在工作当中我们是有数据库存放用户信息的。然后开始编写接收数据之后进行比对的逻辑，返回的参数。

views视图函数：

def userValidPage(request):
    return render(request,'ajax_js_example.html')
def userValid(request):
    '''响应ajax请求'''
    userList = ["if","for","while","and","or","linux","python","django"]
    result = {"state":"error","data":""}
    if request.method == "GET" and request.GET:
        request_name = request.GET.get("username")
        if request_name:
            if request_name in userList:
                result["data"] = "用户名已存在"
            else:
                result["state"] = "success"
                result["data"] = "用户名可以使用"
        else:
            result["data"] = "请输入用户名!"
    else:
        result["state"] = "error"
        result["data"] = "我们只是接受get请求"
    return JsonResponse(result)

url路由设置：

from django.conf.urls import include, url
from django.contrib import admin

from app01.views import getPage, sendData, userValidPage,userValid

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

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

    url(r'^ajax_page/',userValidPage),
    url(r'^ajax_data/',userValid),
]

template前端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="username" type="text"><!--用户名称文本框-->
    <button id="submit" onclick="getData()">
        提交注册
    </button><!--提交按钮-->
    <span id="errorMessage" style="color: red;"></span><!--提示文本-->
    <script>
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e){
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e1){
                xmlhttp = new XMLHttpRequest();
            }
        }
        function updataPage() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                var response = xmlhttp.responseText;
                var data = eval('('+response+')');
                document.getElementById("errorMessage").innerHTML = data["data"];
                console.log(data)
            }
        }
        function getData() {
            var name = document.getElementById("username").value;
            if (name){
                url = "/ajax_data/?username="+name;//get请求是可以拼接在url上以？开始键=值的形式
                xmlhttp.open("GET",url,true);
                xmlhttp.onreadystatechange = updataPage;
                xmlhttp.send(null)
            }else {
                document.getElementById("errorMessage").innerHTML = "提交内容不可以为空！"
            }
        }
    </script>

</body>
</html>

在这里有个问题大家要注意。Js ajax返回的数据是一个字符串，我们需要将他强行转换为json格式，所以使用evel方法进行了转换

var response = xmlhttp.responseText;
var data = eval('('+response+')');

这样写的原因在于：eval本身的问题。 由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。

加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象子变量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：
alert(eval("{}"); // return undefined
alert(eval("({})");// return object[Object]

我们执行的效果如下：

Jq ajax

上面我们讲了js的ajax请求，下面来看一下jq的ajax 请求。相对于js的ajax get请求，jq的编写更加简单。

还是上面的例子，我们用jq实现一下，后端ajax数据校验视图代码我们不用动。

views视图增加一个承载页面：

def jqValidPage(request):
    return render(request,'ajax_jq_example.html')

然后将jq文件方法static目录，（当然在这里是要配置Django的静态目录的）

Settings静态目录配置

STATICFILES_DIRS = (
    os.path.join(BASE_DIR,"static"),
)

路由指出也不要忘了

from django.conf.urls import include, url
from django.contrib import admin

from app01.views import getPage, sendData, userValidPage,userValid,jqValidPage

urlpatterns = [

    url(r'^ajax_jq_page',jqValidPage),
]

接下来我们来编写前端的jq请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jq/jquery-3.1.1.min.js"></script><!--导入外部的jq文件-->
</head>
<body>
    <input id = "username" type = "text"><!--用户名称文本框-->
    <button id = "submit" onclick = "getData()">
        提交
    </button><!--提交按钮-->
    <span id = "errorMessage" style = "color: red;"></span> <!--提示文本-->
    <script>
        function getData() {
            var name = $("#username").val();
            console.log(name);
            if (name){
                $.ajax(
                    {
                        url:"/ajax_data/?username="+name,
                        type:"get",
                        data:"",
                        success:function (data) {
                            console.log(data);
                            $("errorMessage").text(data["data"])
                        },
                        error:function (error) {
                            console.log(error)
                        }
                    }
                )
            }else {
                $("errorMessage").text("提交内容不可以为空")
            }
        }
    </script>

</body>
</html>

效果如下：

 从上面的方法看出，在实现相同功能的情况下，jQuery的代码要JavaScript的代码简洁很多

Ajax常用的配置参数给大家展示一下

参数名称

参数类型

参数描述

async

Boolean

默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

beforeSend

Function

发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。

cache

Boolean

true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

contentType

String

"application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。 

context

Object

这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。

data

String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

dataFilter

Function

给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

dataType

String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。

error

Function

 自动判断 (xml 或 html)。

global

Boolean

是否触发全局 AJAX 事件。

ifModified

Boolean

仅在服务器数据改变时获取新数据。

jsonp

String

在一个 jsonp 请求中重写回调函数的名字。

jsonpCallback

String

为 jsonp 请求指定一个回调函数名。

password

String

用于响应 HTTP 访问认证请求的密码

success

Function

请求成功后的回调函数。

timeout

Number

设置请求超时时间（毫秒）。此设置将覆盖全局设置。

type

String

默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET"。

url

String

默认当前页地址。发送请求的地址。

 以上就是ajax的GET方法下的js以及jq，后期我会再给大家带来ajax的POST方法


http://www.niftyadmin.cn/n/637960.html

相关文章

竖向图片插入_如何在Excel中竖向批量插入图片，这个简单方法你知道吗

竖向图片插入_如何在Excel中竖向批量插入图片，这个简单方法你知道吗

酌酒与君君自宽&#xff0c;人情翻覆似波澜。白首相知犹按剑&#xff0c;朱门先达笑弹冠。草色全经细雨湿&#xff0c;花枝欲动春风寒。世事浮云何足问&#xff0c;不如高卧且加餐。 --[唐]王维《酌酒与裴迪》不知道大家有没有遇到过这种情况&#xff0c;我在Excel中有一列名称…
阅读更多...
如何处理高并发和单点故障

如何处理高并发和单点故障

如何设计一个高并发系统&#xff1f; 如果你确实有真才实学&#xff0c;在互联网公司里干过高并发系统&#xff0c;那你确实拿offer基本如探囊取物&#xff0c;没啥问题。但是如果你要是真是干过高并发系统&#xff0c;面试官绝对绝对不会问这个问题&#xff0c;否则他就不太明…
阅读更多...
唯一id 软件读取stm32_STM32信息安全硬件特性

唯一id 软件读取stm32_STM32信息安全硬件特性

1. STM32硬件安全特性概览STM32 MCU底层硬件具备的安全特性能够覆盖存储访问保护、代码/系统隔离、启动入口限定、防篡改检测、密码学算法加速、身份识别等多方面的安全需求&#xff0c;例如&#xff1a;身份识别&#xff1a;UID, OTP存储访问保护/软件IP保护&#xff1a;RDP&a…
阅读更多...
关于MySQL数据库存储引擎的笔记总结

关于MySQL数据库存储引擎的笔记总结

最近去面试被问到一个很尴尬的事情就是MySQL的数据库存储引擎&#xff0c;而自己只是了解有InnoDB和MyISAM&#xff0c;一个支持事物&#xff0c;一个支持非事物&#xff0c;而其中的一些原理和定义其实没有怎么去了解&#xff0c;所以借此做一个小小的笔记和总结。 MySQL是一…
阅读更多...
mysqldump指定编码导出数据后转变编码

mysqldump指定编码导出数据后转变编码

第一步&#xff0c;导出旧库mysqldump --default-character-set latin1 -uroot -pXXX --database db > /tmp/old.sql第二步&#xff0c;转换编码iconv -t utf-8 -f gb2312 -c /tmp/old.sql > /tmp/new.sql第三步&#xff0c;导入新库修改new.sql&#xff0c;增加一条…
阅读更多...
CMDB开发之用户登录登出的cookie校验

CMDB开发之用户登录登出的cookie校验

django cookie session 我们要写一个cmdb被称为运维资源管理系统&#xff0c;BIM流程管理平台&#xff0c;类似这样的项目&#xff0c;很重要的点&#xff0c;就是用户画像&#xff0c;我们来描述参与业务的主体&#xff0c;和之间的关系。在这样的项目当中&#xff1a;用户和…
阅读更多...
freertos心跳中断_FreeRTOS 中断优先级嵌套错误引发HardFault异常解决（转）

freertos心跳中断_FreeRTOS 中断优先级嵌套错误引发HardFault异常解决（转）

最近在使用FreeRTOS的时候&#xff0c;突然发现程序在运行了几分钟之后所有的任务都不再调用了&#xff0c;只有几个中断能正常使用&#xff0c;看来是系统挂掉了&#xff0c;连续测试了几次想找出问题&#xff0c;可是这个真的有点不知所措。我先看了下文档里的常见错误&#…
阅读更多...
关于Redis数据库的笔记总结

关于Redis数据库的笔记总结

Redis 简介 前面介绍了一些关于MySQL数据库存储引擎方面的东西&#xff0c;那么就不得不提起Redis这个非关系型数据库了。Redis虽然也是一个基于内存的高性能键值对数据库&#xff0c;它可以支持多种数据类型。MemCached:键值对数据库&#xff0c;键和值都是字符串。它和Mem…
阅读更多...
最新文章

Copyright @ 2022~2023