z
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))