基于jQuery实现的Ajax(Django环境)

Posted 2021-01-30

概览:Ajax(Asynchronous javascript And XML)

解释为Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

 

向服务器发送请求的四个途径:

1.浏览器地址栏，默认get请求

2.form表单

    get请求

    post请求

3.a标签，默认get请求

4.Ajax请求

    特点：

        异步请求

        局部刷新

    get

    post

 

基于jquery的Ajax的实现(以下均省略urls.py,自行添加)

cdn链接：<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

 

简单流程:

  1: <script>
  2:     $(".Ajax").click(function () {
  3:         //发送Ajax的请求的简单流程
  4:         $.ajax({
  5:             url:"",    //请求url
  6:             type:"get", //请求方式post
  7:             success:function(data){ //回调函数
  8:                 console.log(data) //data就是传来的数据
  9:             }
 10:         })
 11:     });
 12: </script>

Ajax传递数据:

index.html

  1: <input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"> <button class="cal">计算</button>
  2: <script>
  3:     $(".cal").click(function () {
  4:         $.ajax({
  5:             url: "/cal/",
  6:             type: "post",
  7:             data: {
  8:                 "n1":$("#num1").val(),
  9:                 "n2":$("#num2").val(),
 10:             },
 11:             success:function (data) {
 12:                 console.log(data);
 13:                 $("#ret").val(data);
 14:             }
 15:         })
 16:     });
 17: </script>

views.py

  1: def cal(request):
  2: 
  3:     n1 = int(request.POST.get("n1"))
  4:     n2 = int(request.POST.get("n2"))
  5:     ret = n1 + n2
  6:     return HttpResponse(ret)

 

基于Ajax的登录验证

 

  1: <form>
  2:     用户名 <input type="text" id="user">
  3:     密码 <input type="password" id="pwd">
  4:     <input type="button" value="submit" class="login_btn"><span class="error"></span>
  5: </form>
  6: <script>
  7:     $(".login_btn").click(function () {
  8:         $.ajax({
  9:             url:"/login/",
 10:             type:"post",
 11:             data:{
 12:                 "user":$("#user").val(),
 13:                 "pwd":$("#pwd").val(),
 14:             },
 15:             success:function (data) {
 16:                 console.log(data);
 17:                 // data->json字符串
 18:                 // 反序列化->object {}
 19:                 var data = JSON.parse(data);
 20:                 if (data.user){
 21:                     location.href="http://www.baidu.com"
 22:                 }
 23:                 else {
 24:                     $(".error").html(data.msg).css({"color": "red", "margin-left": "10px"})
 25:                 }
 26:             }
 27:         })
 28:     });
 29: </script>

models.py

  1: class User(models.Model):
  2:     name = models.CharField(max_length=32)
  3:     pwd = models.CharField(max_length=32)

views.py

  1: from app01.models import User
  2: def login(request):
  3: 
  4:     print(request.POST)
  5:     user = request.POST.get("user")
  6:     pwd = request.POST.get("pwd")
  7:     userobj = User.objects.filter(name=user, pwd=pwd).first()
  8:     res = {"user": None, "msg": None}
  9:     if userobj:
 10:         res["user"] = userobj.name
 11:     else:
 12:         res["msg"] = "wrong!"
 13:     import json
 14:     return HttpResponse(json.dumps(res))

 

基于form表单的文件上传

file_put.html

  1: <h3>基于form表单的文件上传</h3>
  2: <form action="" method="post" enctype="multipart/form-data">
  3:     用户名 <input type="text" name="user">
  4:     头像 <input type="file" name="avatar">
  5:     <input type="submit" >

views.py

  1: def file_put(request):
  2: 
  3:     if request.method == "POST":
  4:         print(request.POST)
  5:         print(request.FILES)
  6:         file_obj = request.FILES.get("avatar")
  7:         with open(file_obj.name, "wb") as f:
  8:             for line in file_obj:
  9:                 f.write(line)
 10: 
 11:         return HttpResponse("OK")
 12: 
 13:     return render(request, "file_put.html")

请求头ContentType

ContentType指的是请求体的编码类型，常见的类型共有3种：

1 application/x-www-form-urlencoded
这应该是最常见的 POST 提交数据的方式了。浏览器的原生表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）：

2 multipart/form-data
这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让表单的 enctype 等于 multipart/form-data。

3 application/json
application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

 

基于Ajax的文件上传

html文件

  1: <body>
  2: <h3>基于Ajax的文件上传</h3>
  3: 
  4: <form action="" method="post" enctype="multipart/form-data">
  5:     用户名 <input type="text" id="user">
  6:     头像 <input type="file" id="avatar">
  7:     <input type="button" class="btn" value="Ajax">
  8: </form>
  9: <script>
 10:     $(".btn").click(function () {
 11:         var formdata = new FormData();
 12:         formdata.append("user", $("#user").val());
 13:         formdata.append("avatar", $("#avatar")[0].files[0]);
 14:         $.ajax({
 15:             url:"",
 16:             type:"post",
 17:             contentType:false,
 18:             processData:false,
 19:             data:formdata,
 20:             success:function (data) {
 21:                 console.log(data);
 22:             }
 23:         });
 24:     });
 25: </script>
 26: </body>

 

views.py

  1: def file_put(request):
  2: 
  3:     if request.method == "POST":
  4:         print("body-->", request.body)
  5:         print("POST-->", request.POST)
  6:         print(request.FILES)
  7:         # dowload file code 
  8:         # file_obj = request.FILES.get("avatar")
  9:         # with open(file_obj.name, "wb") as f:
 10:         #     for line in file_obj:
 11:         #         f.write(line)
 12: 
 13:         return HttpResponse("OK")
 14: 
 15:     return render(request, "index.html")