需求：校验用户名和密码
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