一 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应用广泛的一个原因。直接来看一个请求示例：（了解)