视图函数部分
from django.shortcuts import render, HttpResponse
import time
dels 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=("a") #获取第一个值,类型是字符串
# b=("b") #获取第二个值
# res=int(a)+int(b) #转换成数字再计算
# return HttpResponse(str(res)) #HttpResponse只接受字符串#ajax 加法运算 post请求
def cal(request):a=("a")b=("b")res= int(a)+int(b)return HttpResponse(str(res))#基于ajax 进行登录验证
def addrecord(request):ate(id=1, user="xiao", pwd=123)ate(id=2, user="zhang", pwd=111)def login(request):hod=="POST":print(request.POST)user=("user") #"user"对应的是ajax请求里面提交的数据pwd=("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/", //请求的urltype:"get", //默认是getsuccess: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/", //请求的urltype:"get", //默认getdata:{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").).css("color", "red");//data反序列化出来的对象//.html是给error这个标签赋值//显示错误信息, 显示2秒之后消失 function()是匿名函数//.html()里面没有引号相当于取值, .html("")加上引号才是清空
setTimeout(function () {$(".error").html("")}, 2000)}}})})</script></body>
</html>
转载于:.html
本文发布于:2024-01-29 11:34:55，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170649929814986.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
