一 Ajax简介
翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法.
特点：
1.异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
2.浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
2.示例
login.html里面内容
{% load static %} <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <!-- 告诉浏览器安装IE的最高版本渲染浏览器--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 整个网站和等比缩放,目的兼容：移动端，web端。可以完整访问网站--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>标题</title> <!-- Bootstrap 引入文件 --> <link href="{% static ‘bootstrap-3.3.7-dist/css/bootstrap.min.css‘ %}" rel="stylesheet"> </head> <body> <h1>你好，欢迎来到登录页面</h1> <form action="/login/" method="post"> {% csrf_token %} 用户名 <input type="text" id="username" name="username"> 密码 <input type="password" id="pwd" name="password"> {# <input type="submit" id="btn">#} {# <button>提交</button>#} <input type="button" id="btn" value="确认"> </form> {#<button id="btn">提交</button>#} <script src="{% static ‘jquery-3.5.1.js‘ %}"></script> <script src="{% static ‘bootstrap-3.3.7-dist/js/bootstrap.min.js‘ %}"></script> <script> $("#btn").click(function () { $.ajax({ url:‘/login/‘,//方式1：直接获取请求地址不要忘了加双引号或者单引号 {#url:‘{% url "login" %}‘,//方式2：通过url以及别名获取地址#} type:‘post‘, data:{ uname:$(‘#username‘).val(), pwd:$(‘#pwd‘).val(), csrfmiddlewaretoken:$(‘[name=csrfmiddlewaretoken]‘).val(), //方式1：直接获取。因为我们表单中使用csrf_token，这个html文档中就是一个p标签，name属性等于csrfmiddlewaretoken，他的value值就是crstoken,因此我们可以通过js获取值 {#csrfmiddlewaretoken:‘{% csrf_token %}‘,}//方式2：通过url以及别名获取地址#} }, //res就是返回的响应数据 success:function (res) { var retStr = JSON.parse(res)；//json序列化 if (retStr[‘code‘]===302){ var spanEle = document.createElement(‘span‘); $(spanEle).text(retStr[‘msg‘]); $(‘form‘).append(spanEle); }else if(retStr[‘code‘]===0){ location.href = retStr[‘login_url‘] } console.log(retStr,typeof retStr) } }) }) </script> </body> </html>
views.py里面的内容
from django.shortcuts import render,HttpResponse,redirect from django.views import View # Create your views here. import json class LoginView(View): def get(self,request): return render(request,‘login.html‘) def post(self,request): # name = request.POST.get(‘username‘) # pwd = request.POST.get(‘pwd‘) #ajax data里面的键来获取数据 name = request.POST.get(‘uname‘)//必须使用ajax传的data里面参数名称来获取 pwd = request.POST.get(‘pwd‘) if name==‘zxb‘ and pwd ==‘123‘: # return render(request,‘index.html‘) ret = {‘code‘:0,‘login_url‘:‘/index/‘} return HttpResponse(json.dumps(ret)) else: # ret = {‘code‘:302,‘redirect_url‘:‘/login/‘} ret = {‘code‘:302,‘msg‘:‘用户名或者密码错误!!!‘} return HttpResponse(json.dumps(ret)) def index(request): return render(request,‘index.html‘)
urls.py里面的内容
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r‘^admin/‘, admin.site.urls), url(r‘^login/‘, views.LoginView.as_view(),name=‘login‘), url(r‘^index/‘, views.index,name=‘index‘), ]
注意：如果我们的ajax的js代码写在js文件中，我们html通过引入来执行js代码，我们就不可以使用 url:‘{% url "login" %}，csrfmiddlewaretoken:‘{% csrf_token %}‘,这种形式因为我们js文件中不认识这些，这些只是在html文件中才可以使用，如果要在js中使用我们就要用方式1。如下就是js文件中代码
$("#btn").click(function () {
$.ajax({
url:‘/login/‘,
//url:‘{% url "login" %}‘,
type:‘post‘,
data:{
uname:$(‘#username‘).val(),
pwd:$(‘#pwd‘).val(),
csrfmiddlewaretoken:$(‘[name=csrfmiddlewaretoken]‘).val(),
//csrfmiddlewaretoken:‘{% csrf_token %}‘,
},
//res就是返回的响应数据
success:function (res) {
var retStr = JSON.parse(res)
if (retStr[‘code‘]===302){
var spanEle = document.createElement(‘span‘);
$(spanEle).text(retStr[‘msg‘]);
$(‘form‘).append(spanEle);
}else if(retStr[‘code‘]===0){
location.href = retStr[‘login_url‘]
}
console.log(retStr,typeof retStr)
}
})
})
4.AJAX的优缺点
优点：
1.AJAX使用JavaScript技术向服务器发送异步请求；
2.AJAX请求无须刷新整个页面；
3.因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能
四 Ajax文件上传
请求头ContentType
ContentType指的是请求体的编码类型，常见的类型共有3种
1 application/x-www-form-urlencoded
这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 contentType 属性，那么最终就会以 默认格式application/x-www-form-urlencoded 方式提交数据，ajax默认也是这个。请求类似于下面这样（无关的请求头在本文中都省略掉了）：
2 multipart/form-data
这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 <form> 表单的 contentType 等于 multipart/form-data，form表单不支持发json类型的contenttype格式的数据，而ajax什么格式都可以发，也是ajax应用广泛的一个原因。直接来看一个请求示例：（了解)