ajax的get请求

需求：校验用户名和密码

1.导包

导入一个jquery包

2.编写

视图：需要两个视图

第一个：返回页面

第二个：处理ajax提交的数据，请求，返回响应

视图：

# 提供页面
def ajaxdemo(request):
    return render(request,"ajaxdemo.html")

from django.http import JsonResponse
# 处理ajax请求
def ajaxreq(request):
    """
    接收用户的请求   校验用户名  密码
        参数：  username  password
    处理请求
        查询数据库  查看指定用户名密码的用户是否存在
    返回响应
        存在或者  不存在
    :param request:
    :return:
    """
    print(request.GET)
    username = request.GET.get("username")
    password = request.GET.get("password")
    result = {"code":10000,"msg":""}
    if username and password:
        flag = User.objects.filter(name=username,password=setPassword(password)).first()
        if flag:
            result["msg"]= "存在"
        else:
            result["msg"]= "不存在"
            result["code"]=10001
    else:
        result["msg"] = "用户名或者密码为空"
        result["code"] = 10002
    return JsonResponse(result)

模板 ajaxdemo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajaxdemo</title>
    <script src="/static/js/jquery.min.js"></script>
</head>
<body>

<h3>校验用户名密码</h3>
<form action="">
    <input id="username" type="text" name="username" placeholder="用户名"><br>
    <input id="password" type="password" name="password" placeholder="密码"><br>
    <input id="checkvalue" type="button" value="校验">

</form>
<p id="content"></p>


<script>
    $("#checkvalue").click(
        function () {
            // 获取到填写的数据
            var username = $("#username").val();
            var password = $("#password").val();
            // 构建请求的url
            var url = "/ajaxreq/?username=" + username + "&password=" + password;
            // 发送一个请求   ajax 请求
            $.ajax({
                url:url,  // ajax请求要请求的地址
                type:"get", // 请求的类型  get  post
                data:"", // 请求要发送的数据  常在post请求中使用，get请求只需要拼接请求的url就可以
                success:function (data) {
                    // 请求成功之后要执行的方法
                    // data  接收请求成功之后的返回值
                    console.log(data);
                    {#console.log(data["code"]);#}
                    {#console.log(data["msg"]);#}
                    $("#content").text(data["msg"]);
                },
                error:function (error) {
                    // 请求失败之后要执行的内容
                }
            })
            //  拿到响应
        }
    )



</script>


</body>
</html>

路由：

path('ajaxdemo/', ajaxdemo),
path('ajaxreq/', ajaxreq),

ajax发送get请求总结

1.编写html

提供 input --> 获取数据

提供按钮 --> 触发方法 ajax请求

ajax --> 发送请求 get 请求

url 发送地址 get 请求，需要拼接参数到 url 中

data 发送数据

type 发送的请求方式 get

2.第一个视图：提供页面的支持

3.第二个视图：处理 ajax 请求，返回响应

响应内容： json