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))Django——Ajax
原文地址：https://www.cnblogs.com/huang-yc/p/9532533.html