基于jQuery实现的Ajax(Django环境) -云博客

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

# 前端 2024-05-05 15:19 0 27 来源：云博客

概览: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")
     0