AJAX
1. 我们前端往后端发请求的方式:
1. 直接在地址栏输入URL
2. a标签 <a href=" ">XX</a>
3. form表单
4. AJAX
HTTP请求的类型:
GET --> 1. 浏览器请求一个页面 2. 搜索引擎检索关键字的时候
POST --> 1. 浏览器向服务端提交数据,比如登录/注册等
AJAX的应用场景:
1.搜索引擎根据用户输入的关键字,自动提示检索关键字。
2.注册时候用户名的查重!
2. AJAX优点:
1. 异步 :AJAX使用JavaScript技术向服务器发送异步请求
2. 局部刷新(偷偷发请求):应为服务器响应内容不再是整个页面,而是页面中的部分内容,所以AJAX性能高!
3. AJAX缺点:
请求零碎,滥用对服务端压力大
4. jQuery封装的AJAX方法:
# 先导入jquery.js $.ajax({ url: "/test/", type: "post", data: {"key": "value", "key2": [[1, 2, 3], [4, 5, 6]]}, success: function(arg){ // 请求得到响应的时候,自动执行这个回调函数 console.log(arg); } })
views.py
from django.shortcuts import render, redirect, HttpResponse from xxx import models def check_user(request): if request.method == "POST": name = request.POST.get("name", None) # 去数据库中查询用户名时候已经被注册 print(name) ret = models.Person.objects.filter(name=name) if ret: # 用户名已经存在! msg = "用户名已经被注册!" else: msg = "用户名可用" return HttpResponse(msg)
XXX.HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>AJAX用于注册用户名的查重</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/fontawesome/css/font-awesome.min.css"> <link rel="stylesheet" href="/static/dashboard.css"> </head> <body> <form action="/ajax/xxx/" method="post"> <p>用户名: <input type="text" id="i6" name="name"> <span id="e1"></span> </p> <p>密码: <input type="password" name="pwd"> </p> <p> <input type="submit" value="登录"> </p> </form> <script src="/static/jquery-3.3.1.js"></script> <script src="/static/bootstrap/js/bootstrap.min.js"></script> <script src="/static/setupajax.js"></script> <script> {#$("#i6").on("input", function () {#} $("#i6").blur(function () { //取到input框里面的值 var $i4Ele = $(this); var name = $i4Ele.val(); //将span标签设置为空 $("#e1").text(""); //利用ajax请求偷偷发送到后端 $.ajax({ url: "/ajax/check_user/", type: 'post', data: {"name": name}, datatype: 'json', success: function (arg) { $("#e1").text(arg).css("color", "blue"); } }) }); </script> </body> </html>