普通请求
普通请求:会携带整个页面提交,最明显特征是刷新页面,并且请求可能阻塞整个服务。这样会导致请求内容和响应内容冗余,用户体验差。基于这些问题出现了ajax请求。
AJAX请求
Ajax介绍:asynchronousJavascript and xml(异步JS 和 xml)。异步不会阻塞主线程。
1.ajax可以发起局部请求,页面整体不刷新,局部刷新。
2.Ajax可以发起异步请求,请求过程中不会阻塞web正常操作和访问。
Ajax需要js编写。原生js繁复,我们通常用jq封装过的ajax。
前端页面的ajax的内容如下
前端样式(要导入jq文件)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/jquery-3.1.1.min.js"></script> </head> <body> <input id="username" type="text"> <button id="vaild" type="button">校验</button> <span id="ts" style="color: red">用户名已被注册</span> <script> $("#vaild").click( //当减低按钮的时候触发下面事件 function () { var username = $("#username").val(); //获取输入框中的用户名 var url = "/agd/?username="+username; //指定数据提交的地址和提交的数据 $.ajax( { url:url, //请求的路由 type:"get", //请求的类型 data:"", //请求携带的参数 success:function (data) { //后台返回的数据 var content = data.content //获取后台返回数据的内容 $('#ts').text(content) //把数据写到页面上 }, error:function (data) { var content = data.content $('#ts').text(content) } } ) } ) </script> </body> </html>
页面如下:
views.py视图中的内容如下
需要一个页面,但是需要两个视图。
第一个视图只是负责生产ajax请求的页面:
#仅返回页面使用 def ajax_get(request): return render_to_response('ajax_get.html')
第二个视图是为了处理ajax请求的视图,通常返回json,不返回页面
from django.http import JsonResponse #返回ajax的数据的话需要先引入JsonResponse包 def ajax_get_data(request): result = {"status":"error","content":""} #初始化返回的结果,包括是否成功和返回的内容 username = request.GET.get('username') #获取ajax的get请求传过来的参数 if username: #如果前端输入的用户名不为空 user = LoginUser.objects.filter(username=username).first() #数据库中查询username数据 if user: #如果用户名存在,则不可以使用该名称 result["content"] = "用户名已经存在" else:#如果用户名不存在,则可以使用该名称 result["status"] = "success" result["content"]="用户不存在可以注册" else: #如果前端输入的用户名为空 result["content"]="姓名输入不能为空" return JsonResponse(result)