Django - Ajax请求
Ajax
Ajax简介
1、Ajax简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
2、Ajax的特点
异步交互：（不等待）AJAX使用Javascript技术向服务器发送异步请求
局部刷新：AJAX无须刷新整个页面，只刷新需要操作的局部内容
ajax请求，有请求必有响应
补充：
同步交互：客户端发出一个请求之后，需要等待服务器响应结束后，才能发出第二个请求
异步交互：客户端发出请求之后，无需等待服务器响应结束，就发出第二个请求
3、Ajax为什么能够局部刷新？
ajax是JavaScript的一种技术。而ajax只是DOM操作中触发的事件，所以对于浏览器来说还会再开始的页面上的局部渲染事件。
4、浏览器向服务器发送请求的形式
- 地址栏输入 url： 默认是 get 请求
- form 表单提交按钮：默认是get请求，或者post请求（method="post')
- a 标签：默认是 get 请求
- 重定向：默认是get请求
- ajax：可以执行请求方式，type="get" 或 type="post"
对于以上前四个请求，浏览器收到回应消息时，会刷新整个页面。而ajax请求能够实现页面的局部刷新。
5、ajax的基本语法和参数
ajax是基于Javascript，因此需要卸载 script内，通常情况下是点击某些按钮，出发ajax请求：
<script> $('#btn').click(function () { $.ajax({ url: '/login/', type: 'post',
data:{ //这不是字典，是对象类型，特点，键可以不加引号 user:user, pwd:pwd,
// 在django中需要添加该键值对，可以通过django 发送post请求的防御机制 csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() }, success：function(response) { $('#ret').val(response) }, error:function(error){
console.log(error)
} }) }) </script>
json 数据
只要 ajax 才能发送json数据，我们需要把数据转化为json数据，因为网络传输中和文件存储中需要转成序列化数据才可以。
1、什么是json?
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
讲json对象，不得不提到JS对象：
正确的json对象，如下示例：
["one", "two", "three"] {"one": 1, "two": 2, "three": 3} {"names": ["张三", "李四"]} [{ "name": "张三"}, {"name": "李四"}]
错误的json对象
{name: "张三", 'age': 32} // 属性名必须使用双引号
[32, 64, 128, 0xFFF] // 不能使用十六进制值
{"name": "张三", "age": undefined} // 不能使用undefined
{"name": "张三",
"birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
"getName": function() {return this.name;} // 不能使用函数和日期对象
}
2、python中的 json 数据
import json # 序列化 res = {"user":user,"pwd":pwd,"obj":obj} #序列化的数据可以是字典，列表，或字典中放对象 data = json.dumps(res) # 反序列化 json.loads(data)
序列化模块：https://www.cnblogs.com/lilz/p/9514590.html#_label0_2
https://www.cnblogs.com/cyycyhcbw/articles/9487596.html
3、javascript 中的 json的使用
序列化方法： JSON.stringify() 等同于Python json.dumps()
反序列化方法： JSON.parse() 等同于Python json.loads()
JSON.parse() 用于将一个JSON字符串转换为JavaScript对象，例如：
console.log(JSON.parse('{"name":"Yuan"}')); console.log(JSON.parse('{name:"Yuan"}')) ; // 错误，不是JSON字符串 console.log(JSON.parse('[12,undefined]')) ; // 错误，不是JSON字符串
JSON.stringify() 用于将JavaScript值转换为JSON字符串，例如：
console.log(JSON.stringify({'name':"egon"})); // 结果为：{"name":"egon"}
4、json 的数据标准
注意：json 中的字符串都是双引号，因此，字典转成 json 之后，键都是双引号的。
ajax案例1 计算数值
需求：简单的计算数值
# index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax</title> <script src="/static/js/jquery-3.3.js"></script> </head> <body> {% csrf_token %} <input type="text" id="num1"> + <input id="num2" type="text"> = <input id="ret" type="text"> <button class="cal ">计算</button> <script> $('.cal').click(function () { var num1 = $("#num1").val(); var num2 = $("#num2").val(); $.ajax({ url: '/cal/', type: 'get', data:{ //这不是字典，是对象类型，特点，键可以不加引号 num1:num1, num2:num2, csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() }, success：function(response) { $('#ret').val(response) } }) }) </script> </body> </html> index.html
# urls.py
path('index/', views.index), path('cal/', views.cal),
# views.py
def index(request): return render(request,'index.html') def cal(request): num1 = request.GET.get('num1') num2 = request.GET.get('num2') num3 = float(num1) + float(num2) return HttpResponse(str(num3))
效果图：
分析：
首先我们再浏览器上访问http://127.0.0.1:8000/index/，输入计算数值，并点击提交按钮。
其次，点击提交按钮（这已经是到服务端了）就会再index.html文件中触发onclick事件，而事件里有ajax请求(请求消息：ajax的get url data)，根据ajax的url向服务端发送相应数据，实际上这里就会再服务端通过url再通过view中的函数处理，处理完之后返回数据。
实际上这个数据(response)就会返回到ajax的success回调函数里，然后我们再渲染到前端的页面上。
从这里我们可以看到前端页面实际上是没有变动的，变动的只不过是局部事件触发渲染出来的结果。当然这就体现了ajax的作用了
ajax案例2 登录
需求：登录成功后，跳转到首页，失败则在后面提示
# urls.py
path('login/', views.login),
# views.py
def login(reqeust): if reqeust.method=="POST": res={"user":None,"error":""} print(reqeust.POST) user=reqeust.POST.get("user") pwd=reqeust.POST.get("pwd") # 与数据库中的数据表信息进行比对 user_obj=UserInfo.objects.filter(user=user,pwd=pwd).first() if user_obj: res["user"]=user else: res["error"]="用户名或者密码错误！" return HttpResponse(json.dumps(res)) #需要序列化 else: return render(reqeust,"login.html")
# login.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="/static/js/jquery-3.3.js"></script> </head> <body> <form> 用户名 <input type="text" id="user"> 密码 <input type="password" id="pwd"> {# 这里form表单里用button#} <input type="button" value="提交" id="login_btn"><span class="error"></span> {% csrf_token %} </form> <script> $("#login_btn").click(function () { // 发送Ajax请求登录认证 $.ajax({ url:"/login/", type:"post", data:{ user:$("#user").val(), pwd:$("#pwd").val(), csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() }, success:function (response) { console.log(response); // json字符串 var res=JSON.parse(response); //js中的反序列化 console.log(res); if (res.user){ // 登陆成功 location.href="/index/" //跳转到首页 }else{ // 登录失败，则显示。。。 $(".error").html(res.error).css("color","red"); setTimeout(function () { $(".error").html("") },1000) } } }) }) </script> </body> </html> login.html
效果：
注意：ajax请求以后，响应成功后需要跳转到其他的页面，需要在ajax中跳
success:function(res){ if res: location.href="/index/"; }
应用场景
1、用户名是否已被注册
在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“用户名已被注册”的错误信息！
2、基于Ajax进行登录验证
用户在表单输入用户名与密码，通过Ajax提交给服务器，服务器验证后返回响应信息，客户端通过响应信息确定是否登录成功，若成功，则跳转到首页，否则，在页面上显示相应的错误信息。
参考链接：https://www.cnblogs.com/yuanchenqi/articles/7638956.html
浙公网安备 33010602011771号