参考 博文https://www.cnblogs.com/yuanchenqi/articles/9070966.html
Ajax
简单示例：
file_put文件上传页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script> </head> <body> <h3>简单的form</h3> <form action="" method="post"> 用户名<input type="text" name="user"> 密码<input type="password" name="pwd"> <input type="submit"> </form> <h3>基于form表单的文件上传</h3> <form action="" method="post" enctype="multipart/form-data"> 上传文件必须添加： 用户名<input type="text" name="user"> 头像 <input type="file" name="avatar"> <input type="submit"> </form> <h3> 基于Ajax文件上传</h3> <form action="" method="post"> 用户名<input type="text" id="user"> 头像 <input type="file" id="avatar"> <input type="button" class="btn" value="Ajax"> </form> <script> {##} {# $(".btn").click(function(){#} {##} {# $.ajax({#} {# url:"",#} {# type:"post",#} {# contentType:"application/json",#} // json数据串request.body中有数据，POST中没有数据 {# data:JSON.stringify({#} {# a:1,#} {# b:2#} {# }),#} {# success:function(data){#} {# console.log(data)#} {# }#} {# })#} {##} {##} {##} {# })#} {# #} {# $(".btn").click(function(){#} {##} {# $.ajax({#} {# url:"",#} {# type:"post",#} {# data:{#} {# a:1,#} {# b:2#} {# },#} {# success:function(data){#} {# console.log(data)#} {# }#} {# })#} {##} {# })#} // ajax上传文件 $(".btn").click(function(){ var formdata=new FormData(); formdata.append("user",$("#user").val()); formdata.append("avatar",$("#avatar")[0].files[0]); $.ajax({ url:"", type:"post", contentType:false, //编码格式 processData:false, //数据不做预处理 data:formdata, //因为是formdata数据所以上面添加参数contentType、processData success:function(data){ console.log(data) } }) }) </script> </body> </html>
index页面代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script> </head> <body> <h2>this is Index!</h2> <button class="Ajax">Ajax</button> <p class="content"></p> <hr> <input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"> <button class="cal">计算</button> <hr> <form> 用户名 <input type="text" id="user"> 密码 <input type="password" id="pwd"> <input type="button" value="submit" class="login_btn"><span class="error"></span> </form> <script> $(".Ajax").click(function () { //发送Ajax请求 $.ajax({ url: "/test_ajax/", // 请求url type: "get", // 请求方式post data: {a: 1, b: 2}, success: function (data) { // 回调函数 console.log(data); $(".content").html(data) } }) }); // Ajax计算求值 $(".cal").click(function () { $.ajax({ url: "/cal/", type: "post", data: { "n1": $("#num1").val(), "n2": $("#num2").val(), }, success: function (data) { console.log(data); $("#ret").val(data); } }) }) // 登录验证 $(".login_btn").click(function () { $.ajax({ url: "/login/", type: "post", data: { "user": $("#user").val(), "pwd": $("#pwd").val(), }, success: function (data) { console.log(data); // json字符串 console.log(typeof data); var data = JSON.parse(data)// 反序列化 object {} console.log(data); // object console.log(typeof data); if (data.user) { //location.href = "http://www.baidu.com"; alert("success"); } else { $(".error").html(data.msg).css({"color": "red", "margin-left": "10px"}) } } }) }) </script> </body> </html>
视图代码：
def index(request): return render(request, "index.html") def test_ajax(request): print(request.GET) return HttpResponse("hello yuan!") def cal(request): print(request.POST) n1 = int(request.POST.get("n1")) n2 = int(request.POST.get("n2")) ret = n1 + n2 return HttpResponse(ret) from app01.models import User def login(request): print(request.POST) user = request.POST.get("user") pwd = request.POST.get("pwd") user = User.objects.filter(name=user, pwd=pwd).first() res = {"user": None, "msg": None} if user: res["user"] = user.name else: res["msg"] = "username or passwor wrong! " import json return HttpResponse(json.dumps(res))
路由：
urlpatterns = [ path('admin/', admin.site.urls), path('index/', views.index), path('test_ajax/', views.test_ajax), path('cal/', views.cal), path('login/', views.login), path('file_put/', views.file_put), ]
Ajax简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
场景：表单注册
优点：
- AJAX使用Javascript技术向服务器发送异步请求
- AJAX无须刷新整个页面
基于jquery的Ajax实现
<button class="send_Ajax">send_Ajax</button> <script> $(".send_Ajax").click(function(){ $.ajax({ url:"/handle_Ajax/", type:"POST", data:{username:"Yuan",password:123}, success:function(data){ console.log(data) }, error: function (jqXHR, textStatus, err) { console.log(arguments); }, complete: function (jqXHR, textStatus) { console.log(textStatus); }, statusCode: { '403': function (jqXHR, textStatus, err) { console.log(arguments); }, '400': function (jqXHR, textStatus, err) { console.log(arguments); } } }) }) </script>
案例
1 用户名是否已被注册
在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“用户名已被注册”的错误信息！
2 基于Ajax进行登录验证
用户在表单输入用户名与密码，通过Ajax提交给服务器，服务器验证后返回响应信息，客户端通过响应信息确定是否登录成功，成功，则跳转到首页，否则，在页面上显示相应的错误信息。
基于Ajax的文件上传
实例代码：
ajax+form模板：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script> </head> <body> <h3>简单的form</h3> <form action="" method="post"> 用户名<input type="text" name="user"> 密码<input type="password" name="pwd"> <input type="submit"> </form> <h3>基于form表单的文件上传</h3> <form action="" method="post" enctype="multipart/form-data"> 用户名<input type="text" name="user"> 头像 <input type="file" name="avatar"> <input type="submit"> </form> <h3> 基于Ajax文件上传</h3> <form action="" method="post"> 用户名<input type="text" id="user"> 头像 <input type="file" id="avatar"> <input type="button" class="btn" value="Ajax"> </form> <script> {##} {# $(".btn").click(function(){#} {##} {# $.ajax({#} {# url:"",#} {# type:"post",#} {# contentType:"application/json",#} {# data:JSON.stringify({#} {# a:1,#} {# b:2#} {# }),#} {# success:function(data){#} {# console.log(data)#} {# }#} {# })#} {##} {##} {##} {# })#} {# #} {# $(".btn").click(function(){#} {##} {# $.ajax({#} {# url:"",#} {# type:"post",#} {# data:{#} {# a:1,#} {# b:2#} {# },#} {# success:function(data){#} {# console.log(data)#} {# }#} {# })#} {##} {# })#} // ajax上传文件 $(".btn").click(function(){ var formdata=new FormData(); formdata.append("user",$("#user").val()); formdata.append("avatar",$("#avatar")[0].files[0]); $.ajax({ url:"", type:"post", contentType:false, processData:false, data:formdata, success:function(data){ console.log(data) } }) }) </script> </body> </html>
视图：
def file_put(request): if request.method == "POST": print("body", request.body) # 请求报文中的请求体 print("POST", request.POST) # if contentType==urlencoded ,request.POST才有数据 print(request.FILES) file_obj = request.FILES.get("avatar") with open(file_obj.name, "wb") as f: for line in file_obj: f.write(line) return HttpResponse("OK") return render(request, "file_put.html") ''' 请求首行 请求头 ... ContentType:json #urlencoed 请求体 {"a":"1","b":"2"} #a=1&b=2&c=3 '''
ajax模板
<form> 用户名 <input type="text" id="user"> 头像 <input type="file" id="avatar"> <input type="button" id="ajax-submit" value="ajax-submit"> </form> <script> $("#ajax-submit").click(function(){ var formdata=new FormData(); formdata.append("user",$("#user").val()); formdata.append("avatar_img",$("#avatar")[0].files[0]); $.ajax({ url:"", type:"post", data:formdata, processData: false , // 不处理数据 contentType: false, // 不设置内容类型 success:function(data){ console.log(data) } }) }) </script>
视图
def index(request): if request.is_ajax(): print(request.body) # 原始的请求体数据 print(request.GET) # GET请求数据 print(request.POST) # POST请求数据 print(request.FILES) # 上传的文件数据 return HttpResponse("ok") return render(request,"index.html")
检查浏览器的请求头：
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryaWl9k5ZMiTAzx3FT