ajax 的简单请求,get的加法运算,post加法运算,用户登录认证
视图函数部分
from django.shortcuts import render, HttpResponse import time from app01.models import User import json # Create your views here. def index(request): return render(request,"index.html") def books(request): time.sleep(5) return HttpResponse("群山淡静") #ajax 加法运算 get请求 # def cal(request): # a=request.GET.get("a") #获取第一个值,类型是字符串 # b=request.GET.get("b") #获取第二个值 # res=int(a)+int(b) #转换成数字再计算 # return HttpResponse(str(res)) #HttpResponse只接受字符串 #ajax 加法运算 post请求 def cal(request): a=request.POST.get("a") b=request.POST.get("b") res= int(a)+int(b) return HttpResponse(str(res)) #基于ajax 进行登录验证 def addrecord(request): User.objects.create(id=1, user="xiao", pwd=123) User.objects.create(id=2, user="zhang", pwd=111) def login(request): if request.method=="POST": print(request.POST) user=request.POST.get("user") #"user"对应的是ajax请求里面提交的数据 pwd=request.POST.get("pwd") #根据表单的用户名和密码到数据库中匹配 user_obj=User.objects.filter(user=user,pwd=pwd).first() #一般请求下,需要定义一个字典. msg是约定俗成的名字 response={"user":None,"error":""} if user_obj: #user_obj有值的时候 判断有返回结果的请求下 response["user"]=user_obj.user #修改字典的用户名 # return HttpResponse(response) else: response["error"]="用户名和密码不一致" #修改提示信息 # return HttpResponse(response) #返回json格式数据,默认序列化时,对中文默认使用ascii编码 #ensure_ascii=False 表示显示真正的中文 return HttpResponse(json.dumps(response,ensure_ascii=False)) else: return render(request,"login.html")
HTML网页显示部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/js/jquery-3.3.js"></script> </head> <body> <h4>INDEX页面</h4> <button id="btn">click</button> <script> $("#btn").click(function(){ alert(123) } ) </script> <hr> <!-- {#简单的ajax请求#} <button id="btn">click</button> <p class="con"></p> <hr> <input type="text" id="n1"> + <input type="text" id="n2">= <input type="text" id="result"> <button id="cal">计算</button> <script> $("#btn").click(function(){ //发送ajax请求 $.ajax({ url:"/books/", //请求的url type:"get", //默认是get success:function(data){ //data是接收响应体,必须有 console.log(data); //打印响应体数据 $(".con").text(data); //修改p标签的text值 // text不渲染标签 在页面上显示<a>123</a>, // html会渲染标签 在页面上显示123 //上面的流程 //success表示请求成功,并拿到响应体之后执行动作 //data是用来接收响应体的数据,data这个命令可以随便定义 //它接收HttpResponse,比如 群山淡静 //最后是dom操作, 修改HTML代码, 实现局部刷新 } }) }); {#ajax的get请求#} $("#cal").click(function(){ var n1=$("#n1").val(); var n2=$("#n2").val(); //发送ajax请求 $.ajax({ url:"/cal/", //请求的url type:"get", //默认get data:{ a:n1, b:n2 }, success:function(data){ //data接收响应体,必须要有 console.log(data); //打印响应体数据 $("#result").val(data); //修改p标签的text值 } }) }); </script> --> {# ajax加法运算 post请求#} <input type="text" id="n1"> + <input type="text" id="n2">= <input type="text" id="result"> <button id="cal">计算</button> {% csrf_token %} <script> $("#cal").click(function(){ var n1=$("#n1").val(); var n2=$("#n2").val(); var csrf = $("[name=csrfmiddlewaretoken]").val(); //发送ajax请求 $.ajax({ url: "/cal/", //请求的url type: "post", //默认get data: { a: n1, b: n2, csrfmiddlewaretoken:csrf, }, success: function (data) { //data接收响应体,必须要有 console.log(data); //打印响应体数据 $("#result").val(data); //修改p标签的text值 } }) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/js/jquery-3.3.js"></script> </head> <body> <h4>登录页面</h4> <form> 用户名<input type="text" id="user"> 密码<input type="password" id="pwd"> <input type="button" value="提交" id="login_btn"> {# 显示错误信息 #} <span class="error"></span> </form> {% csrf_token %} <script> $("#login_btn").click(function(){ //找到标签绑定事件 var csrf = $("[name=csrfmiddlewaretoken]").val(); //发送ajax请求 登录认证 $.ajax({ url: "/login/", type: "post", data: { user: $("#user").val(), //找到input标签,用.value()获取用户输入的值 pwd: $("#pwd").val(), csrfmiddlewaretoken: csrf, }, success: function (data) { //data接收响应体,必须要有 console.log(data); //打印响应体 json字符串 {#console.log(typeof data);//打印数据类型#} var data = JSON.parse(data);//反序列化数据 把字符串转换成支持的类型 console.log(data); //反序列化出来的对象 //登录成功 if (data.user) { //把上一步反序列化的数据 取user 看看不是不为空 如果不为空 登录成功 //登录成功后, 用location对象 会跳转到的页面 location.href="/index/" } else { //登录失败 $(".error").html(data.error).css("color", "red");//data反序列化出来的对象 //.html是给error这个标签赋值 //显示错误信息, 显示2秒之后消失 function()是匿名函数 //.html()里面没有引号相当于取值, .html("")加上引号才是清空 setTimeout(function () { $(".error").html("") }, 2000) } } }) }) </script> </body> </html>
