AJAX简介：
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
a.同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
b.异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；
AJAX请求‘Content-Type'三种类型：
前端js进行http请求和后端代码进行数据传输的消息格式：
&连接的赋值序列：'Content-Type':'application/x-www-form-urlencoded'(默认)
片段数据:'Content-Type':'multipart/form-data'（上传文件使用，同时请求方式为post，django自动识别解析，文件为request.FILES）
json字符串:'Content-Type':'application/json'(请求数据为json字符串时需要指定,django不能自动识别，需要对request.body进行手动解析操作)
AJAX的简单使用：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> 6 <title>login</title> 7 </head> 8 <body> 9 <div> 10 用户名：<input type="text" name="username" id="username"> 11 密码：<input type="password" name="password" id="password"> 12 <input type="button" id="submit" value="提交">{% csrf_token %} 13 <span id="status"></span> 14 </div> 15 </body> 16 <script> 17 //以post方式请求(csrf) 18 $(function () { 19 $('#submit').click(function () { 20 $.ajax({ 21 url: "{% url 'auth' %}",//请求路径 22 type: 'post', //请求方式 23 data: { //请求数据(post请求的csrf认证键值对固定) 24 username: $('#username').val(), 25 password: $('#password').val(), 26 csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(), 27 }, 28 success: function (response) {//请求回调函数 29 if (response == 1) { 30 location.href = "{% url 'index' %}" 31 } else { 32 $('#status').text('账号或密码有误！') 33 } 34 } 35 }) 36 }) 37 }) 38 39 //以get方式请求 40 $(function () { 41 $('#submit').click(function () { 42 $.ajax({ 43 url:"{% url 'auth' %}", 44 type:'get', 45 data:{ 46 username: $('#username').val(), 47 password: $('#password').val(), 48 }, 49 success:function (response) { 50 if(response==1){ 51 location.href="{% url 'index' %}" 52 }else{ 53 $('#status').text('账号或密码有误！') 54 } 55 } 56 }) 57 }) 58 }) 59 </script> 60 61 </html>
urls.py
1 urlpatterns = [ 2 url(r'^login/',views.login,name='login'), 3 url(r'^auth/',views.auth,name='auth'), 4 url(r'^index/',views.index,name='index'), 5 ]
views.py
1 def login(request): 2 if request.method == 'GET': 3 return render(request, 'login.html') 4 #ajax请求的处理视图函数 5 def auth(request): 6 #POST请求 7 if request.method == 'POST': 8 name = request.POST.get('username') 9 psd = request.POST.get('password') 10 print(name, psd, type(name), type(psd)) 11 if name == "yang" and psd == '123': 12 status = 1 13 else: 14 status = 0 15 return HttpResponse(status) 16 #GET请求 17 if request.method == 'GET': 18 if request.GET.get('username') == 'yang' and request.GET.get('password') == '123': 19 status = 1 20 else: 21 status = 0 22 return HttpResponse(status) 23 24 def index(request): 25 return render(request, 'index.html')
AJAX请求CSRF认证cookie处理：
<script src="{% static 'js/jquery.cookie.js' %}"></script>
<script>
$.ajax({
url: "/cookie_ajax/",
type: "POST",
headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 从Cookie取csrftoken，并设置到请求头中
data: {"username": "chao", "password": 123456},
success: function (data) {
console.log(data);
}
})
</script>