1.Ajax简介
AJAX（Asynchronous Javascript And XML)——“异步的JavaScript与XML”。
Ajax使用Javascript语言与服务器进行异步的交互，传输的数据为XML（时至今日，传输的数据更多为Json格式）。
同步交互与异步交互
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
Ajax的特点：
- 异步交互
- 浏览器页面局部刷新
Ajax的优点：
- Ajax使用Javascirpt向服务器发送异步请求
- Ajax无须刷新整个页面
2.基于jQuery的Ajax实现
2.1 最基础的Ajax代码实现
2.1.1模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
<body>
<div class="content"></div>
<button class="Ajax">Ajax</button>
<script>
$(".Ajax").click(function () {
$.ajax({
url: '/test/',
type: 'get',
success: function (data) {
$('.content').html(data)
}
}
)
})
</script>
</body>
</html>
2.1.2 视图
from django.shortcuts import render,HttpResponse
# Create your views here.
def index(request):
return render(request,'index.html')
def test(request):
return HttpResponse('hello Ajax')
实现效果：
2.2基于Ajax的计算器
2.2.1模板
<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"><button class="cal">计算</button>
$('.cal').click(function () {
$.ajax({
url:'/cal/',
type:'post',
data:{
'n1':$('#num1').val(),
'n2':$('#num2').val(),
},
success:function (data) {
console.log(data);
$('#ret').val(data);
}
})
})
2.2.2视图
def cal(request):
print(request.POST)
n1 = int(request.POST.get('n1'))
n2 = int(request.POST.get('n2'))
ret = n1+n2
return HttpResponse(ret)
实现效果：
2.3基于Ajax的登陆组件
2.3.1模板
<form >
用户名 <input type="text" id="user">
密码 <input type="password" id="pwd">
<input type="button" value="submit" class="login_btn"><span class="error"></span>
</form>
$('.login_btn').click(function () {
$.ajax({
url:"/login/",
type:'post',
data:{
'user':$('#user').val(),
'pwd':$('#pwd').val(),
},
success:function(data){
console.log(data);
console.log(typeof data);
var data=JSON.parse(data);
console.log(data);
console.log(typeof data);
if (data.user){
location.href='http://www.baidu.com'
}
else {
$(".error").html(data.msg).css({"color":'red',"margin-left":'10px'})
}
}
})
})
2.3.2视图
def login(request):
print(request.POST)
user=request.POST.get("user")
pwd=request.POST.get('pwd')
user= User.objects.filter(name=user,pwd=pwd).first()
res= {"user":None,"msg":None}
if user:
res["user"] = user.name
else:
res["msg"]= "username or password wrong!"
import json
return HttpResponse(json.dumps(res))