一 Ajax简介
1.简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
Ajax的特点：
异步交互： 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！
局部刷新： 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
我们以前知道的前端向后端发送数据的方式有：
GET：地址栏、a标签、Form表单
POST：Form表单
那么现在我们在学习一种：那就是ajax
ajax：也是前端向后端发送数据的一种方式
2.示例
写一个登陆认证页面，登陆失败不刷新页面，提示用户登陆失败，登陆成功自动跳转到网站首页。
login.html，内容如下：
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>login页面</title>
</head>
<body>
{#使用ajax的时候就不用使用form提交数据了,input标签中也不用必须带着name属性了#}
{#<input type="hidden" name="csrfmiddlewaretoken" value="BQ5cJCg2GEbRXfVAUe1maIV0mqq3YV86Ta8TznSSquHzBLhQGMFGn2cTDUYOnlS3">#}
{% csrf_token %}
用户名: <input type="text">
密码: <input type="password">
<button>提交</button>
<span style="color: red;"></span>
<script src={% static "js/jquery.js" %}></script>
<script>
{#将ajax嵌套到点击事件中,当点击按钮时候,触发事件响应#}
$('button').click(
function () {
var name = $(':text').val();
var password = $(':password').val();
var csrf_token = $("input[name='csrfmiddlewaretoken']").val();
$.ajax({
{#注意:下面每一个语句的结尾要加逗号,除了data可以依据需要不写(不需要传输数据就可以不用写)其他几个都是必须要有的字段#}
url:{% url 'login' %},
{#要加引号#}
type:"post",
{#这个是请求数据,当不需要传输数据的时候,就可以不用写这个.数据的值是JS的自定义对象数据类型,键可以不用加引号,键是后端的views取数据的依据,
除了csrfmiddlewaretoken的名字是固定的,其他的键的名字都自己随意#}
data:{name:name,password:password,csrfmiddlewaretoken:csrf_token},
success:function (response) {
{#js里面的json反序列化#}
{#通过 HttpResponse 发送来的只有序列化的字符串需要反序列化才能转化成js的对象(才能调用各种方法取值)来使用#}
{#response = JSON.parse(response);#}
if (response.status) {
{#通过字典下标的方式取值,自定义对象的时候,键要带引号才行#}
{#location.href = response['url_path'] #}
location.href = response.url_path
}else {
$('span').text('用户名或密码错误,请重新输入');
console.log('失败')
}
}
})
}
)
</script>
</body>
</html>
home.html，内容如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>home</title>
</head>
<body>
<h1>欢迎来到梁山</h1>
</body>
</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'^home/', views.home,name='home'),
url(r'^login/', views.login,name='login'),
]
views.py，内容如下
from django.shortcuts import render, redirect, HttpResponse
from app01.models import *
from django.urls import reverse
import json
from django.http import JsonResponse
# Create your views here.
def home(request):
return render(request, 'home.html')
def login(request):
if request.method == 'GET':
return render(request, 'login.html')
else: # POST请求是提交数据,
name = request.POST.get('name') # 取数据的依据是对应HTML中ajax中的data的值的键
psw = request.POST.get('password')
record = UserInfo.objects.filter(name=name, psw=psw)
msg = {'status': 0, 'url_path': 0}
if record.exists(): # 能匹配到记录的话,跳转到主页
msg['status'] = 1 # 字典不能使用 .get(键) 调用??
msg['url_path'] = reverse('home')
# return HttpResponse(json.dumps(msg)) # 使用 HttpResponse 只能发送字符串,需要将字典等非字符串的数据类型通过json 序列化为字符串
# return HttpResponse(json.dumps(msg),content_type='application/json') # 第而给参数传入content_type='application/json',
js那边不用反序列化就能使用了(其实是JS那边将接收到的返回值反序列化之后才传给了response)
# return JsonResponse(msg) # 直接传输字典,传输之前不用序列化,js接收到之后也不用反序列化(内部会自动将反序列化之后的值传给response)
return JsonResponse(msg,safe=False) # JsonResponse默认只能传输字典,加第二个参数safe=False才能传输其他的数据类型