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>