django的ajax请求的五个步骤,django jquery ajax

　　AJAX编写：JSON JSON是什么？JSON指的是JavaScript对象符号。JSON是一种轻量级的文本数据交换格式。JSON独立于语言*JSON是自描述的，更容易理解*JSON使用JavaScript语法来描述数据对象，但是JSON仍然是独立于语言和平台的。JSON解析器和JSON库支持许多不同的编程语言。

　　不多说了，来张图吧！

　　符合以下条件的json对象：

　　[一，二，三]

　　{ 一:1，二:2，三:3 }

　　{ 姓名:[张三，李四]}

　　[{name :张三 }，{name :李四 }]不合格的json对象：

　　{name:张三， age: 32} //属性名必须用双引号。

　　[32，64，128，0xFFF] //不能使用十六进制值。

　　{ 姓名:张三，年龄:undefined} //不能使用undefined。

　　{ 姓名:张三，

　　“生日”:新日期(“Fri，2011年8月26日07:13:10 GMT”)，

　　 getName :function(){ return this . name；}//不能使用函数和日期对象

　　}

　　Stringify和parse方法JavaScript中关于JSON对象和字符串转换的两种方法：

　　JSON.parse():用于将JSON字符串转换成JavaScript对象

　　JSON . parse( { name : Q1mi } )；

　　JSON . parse( { name: Q1mi } )；//错误

　　JSON.parse([18，undefined])；//Error JSON.stringify():用于将JavaScript值转换为JSON字符串。

　　JSON.stringify({name:Q1mi})

　　与XML相比，JSON格式是由道格拉斯克洛克福特在2001年提出的，目的是取代繁琐的XML格式。

　　JSON格式有两个显著的优点：写起来简单，一目了然；它符合JavaScript原生语法，可以由解释引擎直接处理，不需要额外的解析代码。所以JSON很快被接受，成为了各大网站数据交换的标准格式，并被写入ECMAScript 5，成为标准的一部分。

　　XML和JSON都使用结构化方法来标记数据。这里简单对比一下。

　　用XML表示的中国部分省市数据如下：

　　？xml版本=1.0 编码=utf-8 ？

　　国家

　　中国/名称

　　省

　　黑龙江/名称

　　城市

　　哈尔滨/城市

　　大庆/城市

　　/城市

　　/省份

　　省

　　广东/名称

　　城市

　　广州/城市

　　深圳/城市

　　珠海/城市

　　/城市

　　/省份

　　省

　　台湾省/名称

　　城市

　　台北/城市

　　城市/城市

　　/城市

　　/省份

　　省

　　新疆名称/姓名

　　城市

　　乌鲁木齐/城市

　　/城市

　　/省份

　　/country XML格式数据

　　用JSON表示如下：

　　{

　　名称:中国，

　　省:[{

　　名称:黑龙江，

　　城市:

　　城市:[哈尔滨，大庆]

　　}

　　}, {

　　名称:广东，

　　城市:

　　城市:[广州，深圳，珠海]

　　}

　　}, {

　　名称:台湾省，

　　城市:

　　城市:[台北，高雄]

　　}

　　}, {

　　姓名:新疆，

　　城市:

　　城市:[乌鲁木齐]

　　}

　　}]

　　}JSON格式数据

　　从上面两端的代码可以看出，JSON简单的语法格式和清晰的层次结构明显比XML更容易阅读，而且在数据交换方面，由于JSON使用的字符比XML少，可以大大节省数据传输占用的带宽。

　　简介AJAX(异步JavaScript和XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据是XML(当然传输的数据不仅仅是XML)。

　　AJAX不是一种新的编程语言，而是一种使用现有标准的新方法。

　　AJAX最大的优点是可以和服务器交换数据，更新部分网页，而不需要重新加载整个页面。(这个特性给用户的感觉是在不知不觉中完成了请求和响应的过程)

　　AJAX不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

　　同步：客户端发送请求后，需要等待服务器响应后再发送第二个请求；异步交互：客户端发送请求后，可以不等待服务器响应就发送第二个请求。

　　示例页面输入两个整数，通过AJAX传输到后端计算结果并返回。

　　！声明文档类型

　　html lang=en

　　头

　　meta charset=UTF-8

　　meta http-equiv= x-ua-compatible content= IE=edge

　　meta name= viewport content= width=device-width，initial-scale=1

　　标题创建交互式、快速动态网页应用的网页开发技术局部刷新实例/标题

　　/头

　　身体

　　输入类型=文本id=i1

　　输入类型=text id=i2=

　　输入类型=text id=i3

　　输入类型=按钮值=AJAX提交id=b1

　　脚本src=/static/jquery-3。2 .1 .量滴js /脚本

　　脚本

　　$(#b1 ).on(click ，function () {

　　$.ajax({

　　URL:"/Ajax _ add/"，

　　键入：获取，

　　数据：{i1:$(#i1 ).val()， i2:$(#i2 ).val()}，

　　成功：函数（数据){

　　$(#i3 ).瓦尔(数据);

　　}

　　})

　　})

　　/脚本

　　/body

　　/html HTML部分代码

　　def ajax_demo1(请求):

　　返回渲染(请求， ajax_demo1.html )

　　def ajax_add(请求):

　　i1=int(请求. GET.get(i1 ))

　　i2=int(请求. GET.get(i2 ))

　　ret=i1 i2

　　返回JsonResponse(ret，safe=False)views.py

　　urlpatterns=[

　　.

　　url(r^ajax_add/,views.ajax_add)，

　　url(r^ajax_demo1/,views.ajax_demo1)，

　　.

　　]urls.py

　　创建交互式、快速动态网页应用的网页开发技术常见应用情景搜索引擎根据用户输入的关键字，自动提示检索关键字。

　　还有一个很重要的应用场景就是注册时候的用户名的查重。

　　其实这里就使用了创建交互式、快速动态网页应用的网页开发技术技术！当文件框发生了输入变化时，使用创建交互式、快速动态网页应用的网页开发技术技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。

　　整个过程中页面没有刷新，只是刷新页面中的局部位置而已！当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

　　当输入用户名后，把光标移动到其他表单项上时，浏览器会使用创建交互式、快速动态网页应用的网页开发技术技术向服务器发出请求，服务器会查询名为柠檬树的用户是否存在，最终服务器返回真实的表示名为柠檬树的用户已经存在了，浏览器在得到结果后显示"用户名已被注册!"。

　　整个过程中页面没有刷新，只是局部刷新了；在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

　　创建交互式、快速动态网页应用的网页开发技术的优缺点优点：AJAX使用Java脚本语言技术向服务器发送异步请求；创建交互式、快速动态网页应用的网页开发技术请求无须刷新整个页面；因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以创建交互式、快速动态网页应用的网页开发技术性能高；

　　框架实现的创建交互式、快速动态网页应用的网页开发技术最基本的框架发送创建交互式、快速动态网页应用的网页开发技术请求示例：

　　！声明文档类型

　　html lang=zh-CN

　　头

　　meta charset=UTF-8

　　meta http-equiv= x-ua-compatible content= IE=edge

　　meta name= viewport content= width=device-width，initial-scale=1

　　标题创建交互式、快速动态网页应用的网页开发技术测试/标题

　　脚本src= https://cdn。bootcss。com/jquery/3。3 .1/jquery。量滴js /脚本

　　/头

　　身体

　　按钮id=ajaxTest AJAX测试/按钮

　　脚本

　　$(#ajaxTest ).单击（函数(){

　　$.ajax({

　　URL:"/Ajax _ test/"，

　　类型： POST ，

　　数据：{用户名： Q1mi ，密码：123456},

　　成功：函数（数据){

　　警报（数据)

　　}

　　})

　　})

　　/脚本

　　/body

　　/html

　　views.py:def ajax_test(请求):

　　用户名=请求. POST.get(用户名)

　　密码=请求. POST.get(密码)

　　打印（用户名、密码)

　　返回HttpResponse(“确定")

　　$.创建交互式、快速动态网页应用的网页开发技术参数数据参数中的键值对，如果值值不为字符串，需要将其转换成字符串类型。

　　$(#b1 ).on(click ，function () {

　　$.ajax({

　　URL:"/Ajax _ add/"，

　　键入：获取，

　　数据：{i1:$(#i1 ).val()， i2:$(#i2 ).val()， hehe: JSON.stringify([1，2，3])}，

　　成功：函数（数据){

　　$(#i3 ).瓦尔(数据);

　　}

　　})

　　})

　　射流研究…实现创建交互式、快速动态网页应用的网页开发技术

　　var B2=文档。getelementbyid( B2 )；

　　b2.onclick=function () {

　　//原生射流研究…

　　var xmlHttp=new XMLHttpRequest()；

　　xmlHttp.open(POST ，/ajax_test/，true)；

　　xmlhttp。setrequestheader( Content-type ， application/x-www-form-urlencoded )；

　　xmlhttp。发送(用户名=q1mi密码=123456 )；

　　xmlhttp。onreadystatechange=function(){

　　if(xmlhttp。就绪状态===4 xmlhttp。状态===200){

　　alert(xmlhttp。responsetext)；

　　}

　　};

　　};查看代码

　　创建交互式、快速动态网页应用的网页开发技术请求如何设置csrf _令牌方式一通过获取隐藏的投入标签中的csrfmiddlewaretoken值，放置在数据中发送。

　　$.ajax({

　　URL:"/cookie _ Ajax/"，

　　类型： POST ，

　　数据：{

　　用户名： Q1mi ，

　　密码:123456,

　　csrfmiddlewaretoken :$([name= csrfmiddlewaretoken ]).val() //使用框架取出csrfmiddlewaretoken的值，拼接到数据中

　　},

　　成功：函数（数据){

　　console.log(数据);

　　}

　　})

　　方式2通过获取返回的甜饼干中的字符串放置在请求头中发送。

　　注意：需要引入一个jquery.cookie.js插件。

　　$.ajax({

　　URL:"/cookie _ Ajax/"，

　　类型： POST ，

　　标头：{X-CSRFToken: $ .cookie(csrftoken)}，//从饼干取csrf _令牌并设置创建交互式、快速动态网页应用的网页开发技术请求头

　　数据：{ 用户名： Q1mi ，密码:123456},

　　成功：函数（数据){

　　console.log(数据);

　　}

　　})

　　或者用自己写一个获取饼干方法：

　　函数getCookie(名称){

　　var cookieValue=null

　　如果(文档。cookie文档。饼干！==) {

　　var cookies=文档。饼干。拆分(；);

　　for(var I=0；i cookies.lengthi ) {

　　var cookie=jquery。trim(cookies[I])；

　　//这个甜饼干字符串是以我们想要的名字开头的吗？

　　if (cookie.substring(0，name。长度1)===(名称=){

　　cookieValue=decodeURIComponent(cookie。子串(名称。长度1))；

　　打破；

　　}

　　}

　　}

　　返回烹饪价值

　　}

　　var csrftoken=get cookie( csrftoken )；

　　每一次都这么写太麻烦了，可以使用$.ajaxSetup()方法为创建交互式、快速动态网页应用的网页开发技术请求统一设置。

　　函数csrfSafeMethod(method) {

　　//这些超文本传送协议方法不需要跨站点请求伪造保护

　　返回(/^(GETHEADOPTIONSTRACE)$/.测试（方法));

　　}

　　$.ajaxSetup({

　　发送前：函数(xhr，设置){

　　如果(!csrfSafeMethod(settings.type)！this.crossDomain) {

　　xhr。setrequestheader( X-CSRFToken ，CSRFToken)；

　　}

　　}

　　});

　　更多细节详见：Djagno官方文档中关于跨站点请求伪造的内容

　　创建交互式、快速动态网页应用的网页开发技术上传文件

　　//上传文件示例

　　$(#b3 ).单击（函数(){

　　var formData=new formData()；

　　表单数据。append( csrfmiddlewaretoken ，$([name= csrfmiddlewaretoken ]).val())；

　　formData.append(f1 ，$(#f1)[0].文件[0]);

　　$.ajax({

　　URL:“/upload/”，

　　类型： POST ，

　　processData: false，//告诉框架不要去处理发送的数据

　　contentType: false，//告诉框架不要去设置内容类型请求头

　　数据：formData，

　　成功：函数（数据){

　　console.log(数据)

　　}

　　})

　　})

　　练习（用户名是否已被注册)功能介绍在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回这个用户名是否已经被注册过。

　　案例分析页面中给出注册表单；在用户名输入标签中绑定onblur事件处理函数。当投入标签失去焦点后获取用户名表单字段的值，向服务端发送创建交互式、快速动态网页应用的网页开发技术请求；框架的视图函数中处理该请求，获取用户名值，判断该用户在数据库中是否被注册，如果被注册了就返回"该用户已被注册",否则响应"该用户名可以注册"。

　　序列化姜戈内置的serializersdef books _ json(请求):

　　book_list=模特.Book.objects.all()[0:10]

　　来自django .核心导入序列化程序

　　ret=串行器。序列化( JSON ，book_list)

　　返回超文本传送协议（Hyper Text Transport Protocol的缩写）响应(退休)

　　补充一个SweetAlert插件示例

　　点击下载自举-甜蜜警报项目。

　　$(.BTN-危险)。on(click ，function () {

　　swal({

　　标题： 你确定要删除吗？,

　　文本： 删除可就找不回来了哦！

　　类型：警告，

　　showCancelButton: true，

　　确认按钮类别：“BTN-危险，

　　 confirmButtonText:删除，

　　取消按钮文本： 取消，

　　关闭确认：假

　　},

　　函数(){

　　var deleteId=$(this).父级()。父级()。attr( data _ id )；

　　$.ajax({

　　URL:"/delete _ book/"，

　　类型： post ，

　　数据：{id: deleteId}，

　　成功：函数（数据){

　　if (data.status===1) {

　　swal(删除成功!, 你可以准备跑路了!,成功);

　　}否则{

　　swal(删除失败, 你可以再尝试一下!,错误)

　　}

　　}

　　})

　　});

　　})

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。