Ajax(Asynchronous Javascript And XML)翻译成英文就是“异步Javascript和XML”。即用Javascript语言与服务器进行异步交互，传输的数据为XML，（现在使用更多的是json数据）。
向服务器发送请求的途径
1.浏览器地址栏 默认是get请求
2.form表单发送请求：
GET请求
POST请求
3.a标签 href属性 默认是get请求
4.ajax()
Ajax的特点
异步交互：客户端发送一个请求后，无需等待服务器响应结束，就可以发送第二个请求；
局部刷新：浏览器页面局部刷新
局部刷新的意思就是当咱们在博客园注册一个新的博客的时候，当咱们输入用户名后鼠标移开的时候，就发送了一个请求，去验证这个用户是否存在，如果存在，则通知用户该用户名已经被注册了。
基于jquery实现的ajax请求
让我们使用pycharm重新创建一个项目，项目名为Ajax_demo，应用名为app01。
# url控制器 from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.site.urls), path('index/', views.index), path('test_ajax/', views.test_ajax), ]
那么当我们需要有对应的视图函数 index和test_ajax：
# app01-->views.py from django.shortcuts import render,HttpResponse # Create your views here. def index(request): return render(request, 'index.html') def test_ajax(request): return HttpResponse('hello!world!')
在这里匹配了相应的视图然后返回了一个html页面：
# index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> <h3>功能1：发送ajax请求</h3> <p></p> //这里的内容是空的 <button>ajax</button> <script> $('.btn').click(function(){ $.ajax({ url:'/test_ajax/', type:'get', success:function(data){ $('.content').html(data) } }) }) </script> </body> </html>
这句话的意思是，当咱们点击button按钮的时候，触发了点击动作，然后发送了一个ajax请求，让我们先看看此时是什么样子的：
当我们点击了按钮的时候，就发送了一个ajax请求：
此时一个简单的ajax请求就发送完成了。
利用ajax实现计算器
首先咱们的index.html中进行布局：
# index.html <h3>功能2：利用ajax实现的计算器</h3> <input type="text">+<input type="text">=<input type="text"><button>计算</button> $('.cal').click(function(){ $.ajax({ url:'/cal/', type:'post', data:{ 'n1':$('.num1').val(), 'n2':$('.num2').val(), }, success:function(data){ console.log(data); $('#sum').val(data); } }) })
然后咱们拿到了n1和n2的值，通过请求url发送给相应的视图然后进行数据处理，最后拿到结果再返回给这个ajax。
# views.py def cal(request): print(request.POST) n1 = int(request.POST.get('n1')) n2 = int(request.POST.get('n2')) sum = n1+n2 return HttpResponse(sum)
此时的url控制器需要新添加一条：
path('cal/', views.cal),
其次是配置文件settings中的这一行需要注释掉：
# 'django.middleware.csrf.CsrfViewMiddleware',
此时再查看结果：
利用ajax实现登陆认证
首先咱们要开一个路由，当用户在浏览器输入的时候，就匹配导对应的视图，所以：
# url控制器 from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.site.urls), path('index/', views.index), path('test_ajax/', views.test_ajax), path('cal/', views.cal), path('login/', views.login), path('login_btn/', views.login_btn), ] # login_btn函数 def login_btn(request): return render(request, 'login_btn.html')
然后返回了这个html页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> <h3>利用ajax实现登陆认证</h3> <form action=""> 用户名 <input type="text"> 密码 <input type="password"> <input type="button" value="submit"> <span></span> </form> <script> $('.login_btn').click(function(){ $.ajax({ url:'/login/', type:'post', data:{ 'user':$('.user').val(), 'pwd':$('.pwd').val(), }, success:function(data){ //此时需要进行转换 console.log(typeof(data)); var data = JSON.parse(data) console.log(typeof(data)); if (data.user){ location.href = 'https://www.baidu.com' }else{ $('.error').html(data.msg).css({'color':'red'}) } } }) }) </script> </body> </html>
最后ajax将请求提交到了/login/中，然后进行匹配视图，然后就开始执行对应代码：