Ajax初识
""" 异步提交 局部刷新 例子:github注册 动态获取用户名实时的跟后端确认并实时展示的前端(局部刷新) 朝发送请求的方式 1.浏览器地址栏直接输入url回车 GET请求 2.a标签href属性 GET请求 3.form表单 GET请求/POST请求 4.ajax GET请求/POST请求 AJAX 不是新的编程语言，而是一种使用现有标准的新方法(比较装饰器) AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程） Ajax我们只学习jQuery封装之后的版本(不学原生的 原生的复杂并且在实际项目中也一般不用) 所以我们在前端页面使用ajax的时候需要确保导入了jQuery ps:并不只有jQuery能够实现ajax，其他的框架也可以 但是换汤不换药 原理是一样的 """
Ajax准备知识：JSON
什么是json？
- JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言 *
- JSON 具有自我描述性，更易理解
* JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
啥都别多说了，上图吧！
合格的json对象(json只认双引的字符串格式)：
["one", "two", "three"] { "one": 1, "two": 2, "three": 3 } {"names": ["张三", "李四"] } [ { "name": "张三"}, {"name": "李四"} ]
stringify与parse方法
JavaScript中关于JSON对象和字符串转换的两个方法：
JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象(json只认双引的字符串格式)
JSON.parse(‘{"name":"Howker"}‘);
JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。
JSON.stringify({"name":"Tonny"})
Ajax简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
小案例：
在不刷新的情况下显示计算结果到页面上，页面输入两个整数，通过AJAX传输到后端计算出结果并返回。（也不能在前端计算）
urls.py
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r‘^admin/‘, admin.site.urls), # ajax url(r‘^ab_ajax/‘, views.ab_ajax), ]
views.py
from django.shortcuts import render,HttpResponse,redirect # Create your views here. def ab_ajax(request): # 和ajax交互的时候，无论返回什么，都不会作用于浏览器，而是交给ajax的回调函数 if request.method == "POST": # print(request.POST) # <QueryDict: {‘i1‘:[‘123‘],‘i2‘:[‘345‘]}> i1 = request.POST.get("i1") i2 = request.POST.get("i2") i3 = int(i1) + int(i2) return HttpResponse(i3) return render(request,"index.html")
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- Bootstrap3 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- Bootstrap3 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- font-awesome.min.css图标库4.7版本 --> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <input type="text" id="d1"> + <input type="text" id="d2"> = <input type="text" id="d3"> <p> <button id="btn">点我</button> </p> <script> // 先给按钮绑定一个点击事件 $("#btn").click(function () { // 朝后端发送ajax请求 $.ajax({ // 1、指定朝哪个后端发ajax请求 url:"", // 不写就是朝当前地址提交 // 2、请求方式 type:"post", //不指定默认就是get，都是小写,用ajax提交post数据，后端也是在request.POST中接收 // 3、数据 data:{"i1":$("#d1").val(),"i2":$("#d2").val()}, // 4、回调函数:当后端给你返回结果的时候会自动触发 args接收后端的返回结果 success:function (args) { $("#d3").val(args) // 通过DOM操作动态渲染到第三个input里面 } }) }) </script> </body> </html>
补充：如果视图函数返回字典需要序列化
# 针对后端如果是用HttpResponse返回的数据（json模块序列化后） 回调函数不会自动帮你反序列化 # 如果后端直接用的是JsonResponse返回的数据 回调函数会自动帮你反序列化 # HttpResponse解决方式 1.自己在前端利用JSON.parse(args)，手动反序列化 2.在ajax里面配置一个参数 dataType:"json",
示例1：后端使用JsonResponse返回数据
urls.py
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r‘^admin/‘, admin.site.urls), # ajax url(r‘^ab_ajax/‘, views.ab_ajax), ]
views.py
from django.shortcuts import render,HttpResponse,redirect from django.http import JsonResponse # Create your views here. def ab_ajax(request): # 和ajax交互的时候，无论返回什么，都不会作用于浏览器，而是交给ajax的回调函数 if request.method == "POST": # print(request.POST) i1 = request.POST.get("i1") i2 = request.POST.get("i2") i3 = int(i1) + int(i2) d = {"code":100,"msg":i3} return JsonResponse(d) return render(request,"index.html")
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- Bootstrap3 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- Bootstrap3 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- font-awesome.min.css图标库4.7版本 --> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <input type="text" id="d1"> + <input type="text" id="d2"> = <input type="text" id="d3"> <p> <button id="btn">点我</button> </p> <script> // 先给按钮绑定一个点击事件 $("#btn").click(function () { // 朝后端发送ajax请求 $.ajax({ // 1、指定朝哪个后端发ajax请求 url:"", // 不写就是朝当前地址提交 // 2、请求方式 type:"post", //不指定默认就是get，都是小写,用ajax提交post数据，后端也是在request.POST中接收 // 3、数据 data:{"i1":$("#d1").val(),"i2":$("#d2").val()}, // 4、回调函数:当后端给你返回结果的时候会自动触发 args接收后端的返回结果 success:function (args) { {#$("#d3").val(args) // 通过DOM操作动态渲染到第三个input里面#} console.log(typeof args) // 接收到的是对象类型 } }) }) </script> </body> </html>
示例2：后端用HttpResponse返回的数据（json序列化后的数据）
urls.py
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r‘^admin/‘, admin.site.urls), # ajax url(r‘^ab_ajax/‘, views.ab_ajax), ]
views.py
from django.shortcuts import render,HttpResponse,redirect import json # Create your views here. def ab_ajax(request): # 和ajax交互的时候，无论返回什么，都不会作用于浏览器，而是交给ajax的回调函数 if request.method == "POST": # print(request.POST) i1 = request.POST.get("i1") i2 = request.POST.get("i2") i3 = int(i1) + int(i2) d = {"code":100,"msg":i3} return HttpResponse(json.dumps(d)) return render(request,"index.html")
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- Bootstrap3 核心 CSS 文件 --> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- Bootstrap3 核心 JavaScript 文件 --> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- font-awesome.min.css图标库4.7版本 --> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <input type="text" id="d1"> + <input type="text" id="d2"> = <input type="text" id="d3"> <p> <button id="btn">点我</button> </p> <script> // 先给按钮绑定一个点击事件 $("#btn").click(function () { // 朝后端发送ajax请求 $.ajax({ // 1、指定朝哪个后端发ajax请求 url:"", // 不写就是朝当前地址提交 // 2、请求方式 type:"post", //不指定默认就是get，都是小写,用ajax提交post数据，后端也是在request.POST中接收 // 3、数据 data:{"i1":$("#d1").val(),"i2":$("#d2").val()}, // 4、回调函数:当后端给你返回结果的时候会自动触发 args接收后端的返回结果 dataType:"json", success:function (args) { {#$("#d3").val(args) // 通过DOM操作动态渲染到第三个input里面#} console.log(typeof args) // 接收到的是对象类型 } }) }) </script> </body> </html>