1.Ajax技术
认识ajax之前必须先了解json模块，json(Javascript Obiect Notation,JS对象标记)属于一种轻量级的数据交换格式
json的格式来源于js的格式，也可以说json是js的一个子集
json只认双引号的，它一定是一个字符串
1.1 js下的序列化和反序列化
JSON.stringify():用于将一个JavaScript对象转换为JSON字符串
JSON.parse():用于将一个JSON字符串转换为JavaScript对象
<script> //===========js中的json序列化=========== s = '{"name":1}'; var data = JSON.parse(s); console.log(data); console.log(typeof data); //object //===========js中的json的反序列化======= s2={'name':'yuan'}; console.log(JSON.stringify(s2),typeof JSON.stringify(s2)) //string </script>
1.2 ajax介绍
前端向后端发送数据的方式：
GET：地址栏、a标签、Form表单
POST：Form表单
ajax：也是前端向后端发送数据的一种方式。
AJAX（Asynchronous Javascript And XML）,中文就是“异步Javascript和XML”
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
Ajax的特点：
异步交互： 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！
局部刷新： 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
应用场景：
百度搜索，输入某个字或内容时，我们并没有提交请求，但是搜索栏会出现与你输入的内容相关的下拉列表，这就使用了ajax技术。整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
1.3 基于jquery应用下的ajax
应用一：
通过点击按钮实现局部刷新，显示出结果6666
Index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> </head> <body> {#简单应用#} <button class="btn">click</button> <p class="con"></p> <script> $(".btn").click(function(){ //发送ajax请求 $.ajax({ url:"/eleven/", type:"get", // 形参data参数必须要传，它其实就是response返回的值 success:function (data) { $(".con").html(data); } }) }); </script> </body> </html>
views.py
def index(request): return render(request,"index.html") def eleven(request): return HttpResponse(6666)
urls.py
path("index/",views.index), path("eleven/",views.eleven),
点击click最终效果：（这个效果并没有全局刷新，而是点击后局部刷新得到的）
应用二：
在url页面按钮框输入数字实现加法运算
这里我不一一例了，只用把案例一index.thml中输入部分和jquery部分换掉即可
index.html
{#计算#}
<input type="text" class="n1"> + <input type="text" class="n2"> =<input type="text" class="n3">
<button class="cal">计算</button>
{% csrf_token %}
//携带参数进行请求，获取的n1,n2就是我们在浏览器输入的值。data里面的值传给了视图函数
$(".cal").click(function () {
var n1 = $(".n1").val();
var n2 = $(".n2").val();
$.ajax({
url: /cal/,
type: "post",
data: {
a: n1,
b: n2,
csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
},
success: function (data) {
console.log(data);
$(".n3").val(data);
}
})
});
views.py
def cal(request): a = request.POST.get("a") b = request.POST.get("b") res = int(a) + int(b) return HttpResponse(str(res))
urls.py
path("index/",views.index), path("cal/", views.cal),
应用三：
实现登录验证功能
form表单已经不用再定义是什么请求，这一步都在ajax中实现
{#用户验证#}
<form action="">
用户名 <input type="text" id="user">
密码 <input type="password" id="pwd">
<input type="button" value="submit" id="login_btn"><span class="error"></span>
</form>
// 登录验证
$("#login_btn").click(function () {
$.ajax({
url: "/login/",
type: "post",
data: {
user: $("#user").val(),
pwd: $("#pwd").val(),
csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
},
// 这里关键是视图函数返回的data的数据类型
success: function (data) {
console.log(data);
console.log(typeof data);
var data = JSON.parse(data);
console.log(data);
console.log(typeof data);
if (data.user) {
}
// if(user),表明成功，失败了对传过来的文本修改颜色
else {
$(".error").text(data.msg).css({"color": "red", "margin-left": "20px"})
setTimeout(function(){
setTimeout(function(){
$(".error").text("")
},1000)
}
}
})
});
views.py
from book.models import User import json def login(request): # 先要从数据库导入相关个人账号和密码 user = request.POST.get("user") pwd = request.POST.get("pwd") # 获取账号和密码 user_obj = User.objects.filter(user=user, pwd=pwd).first() response = {"user": None, "msg": None} if user_obj: response["user"] = user_obj.user else: response["msg"] = "用户名或者密码不一致" # 确保dumps的数据编码一致性 return HttpResponse(json.dumps(response, ensure_ascii=False))
models.py
class User(models.Model): user = models.CharField(max_length=32) pwd = models.CharField(max_length=32)
urls.py
path("index/",views.index), path("login/", views.login),
效果：
1.4 csrf跨站请求伪造
一般会由于这个问题报一个Fororbidden的错，自己在ajax下的data中组装一组键值对即可解决
<form> {% csrf_token %} </form> data:{ csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(), name:$(":text").val(), pwd:$(":password").val() },