1,AJAX准备知识:JSON
JSON指的是JavaScript对象表示方法(JavaScript Object Notation)
JSON是轻量级的文本数据交换格式
JSON独立于语言
JSON具有自我描述性, 更易理解
JSON使用JavaScript语法来描述数据对象,但是JSon仍然独立于语言和平台,json解析器和json库支持许多不同的语言
合格的json对象:
["雪雪","小雪","雪儿","小雪砸","雪人"]{"雪雪":1,"小雪":2,"雪人":3,"雪儿":4,"小雪砸":5}{"name":["雪雪","小雪"]}{{"name":"雪雪","name":"小雪"}}不合格的json对象:
{name:"雪雪","age":29} ?# 属性名必须使用双引号[29,26,28,0xFFF] ?# 不能使用十六进制{"name":"雪雪","name":undefined} ?# 不能使用undefined{"name":"雪雪","birthday":new Date(日期),"getName": function(){return this name;} ?# 不能使用日期和函数对象} ???????2,stringify和parse方法
JavaScript中关于JSON对象和字符串转换的两个方法:
JSON.parse():将用于一个JSON字符串转化为JavaScript对象
JSON.parse("{"name":"雪雪"}");JSON.parse("{name:"雪雪"}"); ?// 错误JSON.parse("{29,undefined}"); ?// 错误JSON.stringfy():用于将JavaScript值转化为JSON字符串
JSON.stringfy({"name":"雪雪"})3,和XML比较
JSON格式于2001年由Douglas Crockford提出,目的就是取代繁琐笨重的XML格式.
JSON格式有两个显著的优点:书写简单,一目了然;符合JavaScript原生语法,可以由解释引擎 直接处理,不用添加解析代码,所以,JSON迅速被接受,已经成为各大网站交换的标准的格式,并被写入ECMAScript5,成为标准的一部分
XML和JSON都使用结构化时间来标记数据,下面来做一个简单的比较
用XML表示额数据如下:
<?xml version="1.0" encoding="utf-8"?><country> ???<name>中国</name> ???<province> ???????<name>黑龙江</name> ???????<cities> ???????????<city>哈尔滨</city> ???????????<city>大庆</city> ???????</cities> ???</province> ???<province> ???????<name>广东</name> ???????<cities> ???????????<city>广州</city> ???????????<city>深圳</city> ???????????<city>珠海</city> ???????</cities> ???</province> ???<province> ???????<name>台湾</name> ???????<cities> ???????????<city>台北</city> ???????????<city>高雄</city> ???????</cities> ???</province> ???<province> ???????<name>新疆</name> ???????<cities> ???????????<city>乌鲁木齐</city> ???????</cities> ???</province></country>
用JSON表示如下:
{ ???"name": "中国", ???"province": [{ ???????"name": "黑龙江", ???????"cities": { ???????????"city": ["哈尔滨", "大庆"] ???????} ???}, { ???????"name": "广东", ???????"cities": { ???????????"city": ["广州", "深圳", "珠海"] ???????} ???}, { ???????"name": "台湾", ???????"cities": { ???????????"city": ["台北", "高雄"] ???????} ???}, { ???????"name": "新疆", ???????"cities": { ???????????"city": ["乌鲁木齐"] ???????} ???}]}由上端的两段代码可以看出,JSON简单的语法格式和清晰的层次结构明显要比XML容易阅读,并且在数据交换方面,由于JSON所使用的字符要比XML少的多,可以大大的节约传输数据所占用的带宽
4,AJAX简介
AJAX(Asynchronous JavaScript And XML)翻译成中文就是"异步的JavaScript和XML".即使使用JavaScript与服务器进行异步交流, 传输的数据为XML(当然,传输的数据不只是XML).
AJAX不是新的编程语言,而是一种使用现有标准的新方法.
AJAX最大的优点是在重新不加载页面的情况下,可以于服务器交换数据并更新部分网页内容,(这一特点给用户的感受是在不知不觉中完成请求和访问的过程)
AJAX不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行
1>同步交互:客户端法一个请求后,需要等待服务器响应结束后,才能发出第二个请求
2>异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求.
通过AJAX传输数据到后端代码
<!DOCTYPE html><html lang="zh-cn"><head> ???<meta charset="UTF-8"> ???<title>实现字符串的拼接</title></head><body><h1>AJAX的请求响应方式</h1>{#<input type="text" name="n1">+#}{#<input type="text" name="n2">=#}{#<input type="text" name="n3">#}{#<input type="submit" id="b1">#}<hr><input type="text" name="ii1">+<input type="text" name="ii2">=<input type="text" name="ii3"><input type="submit" id="b2"><input type="submit" id="b3" value="测试参数"><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>{# ?第一版,简单的ajax提交代码 ?#}{# ???$("#b1").click(function () ?{ ?????????{# 给比这个提交按钮绑定点击事件 #}{# ???????$.ajax({ ???????????????????????????{# 固定写法,声明是ajax提交数据 #}{# ???????????url: "/home/", ?????????????????{# 写明要移交数据的地址,如果是本网站跳转就写相对路径,如果是跨站就写绝对路径 #}{# ???????????type: "post", ??????????????????{# 提交数据的类型是post请求, #}{# ???????????data: { ????????????????????????{# 要提交的所有数据都放在data中 #}{# ???????????????n1: $("[name=‘n1‘]").val(), {# 获取到用户第一个输入框的内容 #}{# ???????????????n2: $("[name=‘n2‘]").val() ?{# 获取到用户第二个输入框的内容 #}{# ???????????},#}{# ???????????success: function (res) { ?????{# success表示接受服务器发过来的处理后的数据,括号要加参数 #}{# ???????????????console.log(res);#}{# ???????????????$(‘[name="n3"]‘).val(res); ??{# 把接受到处理后的数据填入到第三个输入框中,交给浏览器渲染 #}{# ???????????}#}{# ???????})#}{# ???});#}{# 第二版证明每个提交事件是异步的 #}{# ???$("#b2").click(function () { ???????????????{# 异步处理,每一个是一个单独的提交时间 #}{# ???????$.ajax({#}{# ???????????url: "/index/",#}{# ???????????type: "post",#}{# ???????????data: {#}{# ???????????????nn1: $("[name=‘ii1‘]").val(),#}{# ???????????????nn2: $("[name=‘ii2‘]").val()#}{# ???????????},#}{# ???????????success: function (res) {#}{# ???????????????console.log(res);#}{# ???????????????$("[name=‘ii3‘]").val(res);#}{# ???????????}#}{# ???????})#}{# ???});#}{# AJAX提交数据可以是序列化的字符串 #} ???????$("#b3").click(function () { ????????????????????????????{# 给b3按钮绑定点击事件 #} ???????$.ajax({ ?????????????????????????????????????????????{# 指定ajax提交数据 #} ???????????url: "/ajax_test/", ??????????????????????????????{# 指定提交的地址 #} ???????????type: "post", ????????????????????????????????????{# 指定提价哦数据的类型 #} ???????????data: { ??????????????????????????????????????????{# 要提交的数据 #} ???????????????name:"雪雪", ???????????????age:"29", ???????????????hobby:JSON.stringify(["我","购物","看电影"]) ??{# 提交非字符串类型的数据结构需要stringfy序列化 #} ???????????}, ???????????success: function (res) { ????????????????????????{# 接收数据处理后返回的response对象 #} ???????????????console.log(res); ???????????????$("[name=‘ii3‘]").val(res); ???????????????????{# 把接收到的数据通过形参res接收到添加到结果框中 #} ???????????}, ???????????error: function (ret) { ???????????????????????????{# 当视图函数中有错误的时候会走这个error的函数 #} ???????????????console.log(ret); ???????????????console.log("这是错误的") ???????????} ???????}) ???})</script></body></html> ???这是视图函数的代码:
from django.shortcuts import render, HttpResponseimport json# Create your views here.from django.http import JsonResponse# def home(request):# ????# 第二次进来,要获取用户输入的值# ????if request.method == "POST":# ????????n1 = request.POST.get("n1")# ????????n2 = request.POST.get("n2")# ????????# 获取到数据后做拼接# ????????n3 = n1 + n2# ????????# 把处理后的数据发送给前端并渲染# ????????return HttpResponse(n3)# ????# 第一次进来是GET请求,返回给用于一个页面# ????return render(request, "home.html")## def index(request):# ????# 第二次进来是post提交的请求# ????if request.method == "POST":# ????????# 获取用户输入的值# ????????nn1 = request.POST.get("nn1")# ????????nn2 = request.POST.get("nn2")# ????????nn3 = nn1 + nn2# ????????# 把获取到的值发送给浏览器已经渲染了的页面的对应的地方# ????????return HttpResponse(nn3)# ????# 第一次进来是GET请求,返回给用于一个网页# ????return render(request, "home.html")def ajax_test(request): ???print(123) ???if request.method == "POST": ???????# 获取数据 ???????# 提交过来的数据是字符串类型需要反序列化 ???????print(request.POST.get("data")) ???????data_dict1 = request.POST.get("name") ???????data_dict2 = request.POST.get("age") ???????data_dict3 = request.POST.get("hobby") ???????print("name:",data_dict1,type(data_dict1)) ???????print("age:",data_dict2,type(data_dict2)) ???????print("hobby:",data_dict3,type(data_dict3)) ???????# msg1 = json.loads(data_dict1) ???????# msg2 = json.loads(data_dict2) ???????msg3 = json.loads(data_dict3) ???????# print(msg1) ???????# print(msg2) ???????print(msg3[0]) ???????print(msg3[1]) ???????print(msg3[2]) ???# ????print(data_dict3[0]) ???# ????print(data_dict3[1]) ???# ????print(data_dict3[2]) ???# print(789) ???# return HttpResponse("ok") ???????ret = {"status":200,"mag":"ok"} ???????int("ajgdh") ???????return JsonResponse(ret) ???return render(request, "home.html")5,AJAX常见应用场景
搜索引擎根据用户输入的关键字,自动提示检索关键字.还有一个很重要的应用场景就是注册时候的用户名查重.其实这里就使用了AJAX技术!当文件框发生变化时,使用AJAX技术向服务器发送一个请求,然后服务器会把查询到的结果响应给浏览器,最后再把后端返回的结果展示出来
- 整个过程中页面没有刷新,只是刷新页面中的局部位置而已!
- 当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!
当用户输入同户名时,把光标移动到其他表单时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询名为lemontree7777777的用户是否存在,最终服务器返回true表示名为lemontree7777777用户已经存在了,浏览器在得到结果显示"用户名已经被注册"
- 整个过程中页面没有刷新,只是局部刷新了
- 在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作
7,AJAX的优缺点:
优点:
- AJAX使用JavaScript技术向服务器发送异步请求;
- AJAX请求无须刷新整个页面
- 因为服务器响应内容不在是整个页面,而是页面中的部分内容,所以AJAX性能高
缺点:
- 破坏浏览器后退按钮的正常行为,在动态更新页面的情况下,用户无法回到前一个页面.
- 使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中
- 进行AJAX开发时,网络延迟---->即用户发出请求到服务器到服务器发出响应之间的时间间隔.
8,AJAX请求如何设置csrf_token
放法1:通过隐藏的input标签中的csrfmiddlewaretoken值,放在data中发送
<!DOCTYPE html><html lang="zh-cn"><head> ???<meta charset="UTF-8"> ???<title>实现字符串的拼接</title></head><h1>AJAX的请求响应方式</h1><input type="text" name="ii1">+<input type="text" name="ii2">=<input type="text" name="ii3"><input type="submit" id="b2">{#<input type="submit" id="b3" value="测试参数">#}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script> ???$("#b2").click(function () { ???????$.ajax({ ???????????url: "/home/", ???????????type: "POST", ???????????data: { ???????????????ii1: $("[name=‘ii1‘]").val(), ???????????????ii2: $("[name=‘ii2‘]").val(), ???????????????csrfmiddlewaretoken: $("[name=‘csrfmiddlewaretoken‘]").val() ?// 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中 ???????????}, ???????????success: function (res) { ???????????????console.log(res); ???????????????$("[name=‘ii3‘]").val(res) ???????????} ???????}) ???})</script></body></html>方法2:通过获取返回的cookie中的字符串放置在请求头中发送.注意:需要引入一个jQuery.cookie.js插件
<!DOCTYPE html><html lang="zh-cn"><head> ???<meta charset="UTF-8"> ???<title>实现字符串的拼接</title></head><body><h1>AJAX的请求响应方式</h1><hr>{% csrf_token %}<input type="text" name="ii1">+<input type="text" name="ii2">=<input type="text" name="ii3"><input type="submit" id="b2">{#<input type="submit" id="b3" value="测试参数">#}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script>{# ajax法post请求,通过CSRF验证的第二种方法,先死记住吧!不理解源码! #}
$("#b2").click(function () {
???$.ajax({
???????url: "/home/",
???????type: "POST",
???????headers: {"X-CSRFToken": $("[name=‘csrfmiddlewaretoken‘]").val()}, ?// 从Cookie获取csrftoken,并设置到请求头中
???????data: {
???????????ii1: $("[name=‘ii1‘]").val(),
???????????ii2: $("[name=‘ii2‘]").val()
???????},
???????success: function (res) {
???????????console.log(res);
???????????$("[name=‘ii3‘]").val(res)
???????}
???????})
???});/script> </body> </html>
方法3,全局设置:如果使用cookie从cookie中取值,必要有cookie有cookie的方式,确保cookie存在csrftoken值
- 使用{% csrf_token %}
- 不使用{% csrf_token %}
- --->from django.views.decoration.csrf import ensure_csrf_cookie
- --->ensure_csrf_cookie加在试图函数上,保证返回的响应有cookie
<!DOCTYPE html><html lang="zh-cn"><head> ???<meta charset="UTF-8"> ???<title>实现字符串的拼接</title></head><body><h1>AJAX的请求响应方式</h1><hr>{% csrf_token %}<input type="text" name="ii1">+<input type="text" name="ii2">=<input type="text" name="ii3"><input type="submit" id="b2">{#<input type="submit" id="b3" value="测试参数">#}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="/static/ajax_setup.js"></script><script> ???{# ajax发送post请求,通过CSRF验证的第三种方法,先死记住吧!不理解源码 #} ???$("#b2").click(function () { ???????$.ajax({ ???????????url:"/home/", ???????????type:"post", ???????????data:{ ???????????????ii1:$("[name=‘ii1‘]").val(), ???????????????ii2:$("[name=‘ii2‘]").val(), ???????????}, ???????????success: function (data) { ???????????????console.log(data); ???????????????$("[name=‘ii3‘]").val(data) ???????????} ???????????}) ???????})</script></body></html>function getCookie(name) { ???var cookieValue = null; ???if (document.cookie && document.cookie !== ‘‘) { ???????var cookies = document.cookie.split(‘;‘); ???????for (var i = 0; i < cookies.length; i++) { ???????????var cookie = jQuery.trim(cookies[i]); ???????????// Does this cookie string begin with the name we want? ???????????if (cookie.substring(0, name.length + 1) === (name + ‘=‘)) { ???????????????cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); ???????????????break; ???????????} ???????} ???} ???return cookieValue;}var csrftoken = getCookie(‘csrftoken‘);function csrfSafeMethod(method) { ?// these HTTP methods do not require CSRF protection ?return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));}$.ajaxSetup({ ?beforeSend: function (xhr, settings) { ???if (!csrfSafeMethod(settings.type) && !this.crossDomain) { ?????xhr.setRequestHeader("X-CSRFToken", csrftoken); ???} ?}});试图函数的代码:
from django.shortcuts import render, HttpResponseimport json# Create your views here.from django.http import JsonResponsefrom django.views.decorators.csrf import ensure_csrf_cookie# @ensure_csrf_cookiedef home(request): ???# 第二次进来,要获取用户输入的值 ???if request.method == "POST": ???????ii1 = request.POST.get("ii1") ???????ii2 = request.POST.get("ii2") ???????print(ii1) ???????print(ii2) ???????# 获取到数据后做拼接 ???????ii3 = ii1 + ii2 ???????# 把处理后的数据发送给前端并渲染 ???????return HttpResponse(ii3) ???# 第一次进来是GET请求,返回给用于一个页面 ???return render(request, "home.html")## def index(request):# ????# 第二次进来是post提交的请求# ????if request.method == "POST":# ????????# 获取用户输入的值# ????????nn1 = request.POST.get("nn1")# ????????nn2 = request.POST.get("nn2")# ????????nn3 = nn1 + nn2# ????????# 把获取到的值发送给浏览器已经渲染了的页面的对应的地方# ????????return HttpResponse(nn3)# ????# 第一次进来是GET请求,返回给用于一个网页# ????return render(request, "home.html")def ajax_test(request): ???print(123) ???if request.method == "POST": ???????# 获取数据 ???????# 提交过来的数据是字符串类型需要反序列化 ???????print(request.POST.get("data")) ???????data_dict1 = request.POST.get("name") ???????data_dict2 = request.POST.get("age") ???????data_dict3 = request.POST.get("hobby") ???????print("name:",data_dict1,type(data_dict1)) ???????print("age:",data_dict2,type(data_dict2)) ???????print("hobby:",data_dict3,type(data_dict3)) ???????# msg1 = json.loads(data_dict1) ???????# msg2 = json.loads(data_dict2) ???????msg3 = json.loads(data_dict3) ???????# print(msg1) ???????# print(msg2) ???????print(msg3[0]) ???????print(msg3[1]) ???????print(msg3[2]) ???# ????print(data_dict3[0]) ???# ????print(data_dict3[1]) ???# ????print(data_dict3[2]) ???# print(789) ???# return HttpResponse("ok") ???????ret = {"status":200,"mag":"ok"} ???????int("ajgdh") ???????return JsonResponse(ret) ???return render(request, "home.html")
AJAX请求提交数据
原文地址：https://www.cnblogs.com/ljc-0923/p/9806224.html