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>
ajax 的简单请求,get的加法运算,post加法运算,用户登录认证的更多相关文章
- Ajax发送简单请求案例
所谓简单请求,是指不包含任何参数的请求.这种请求通常用于自动刷新的应用,例如证券交易所的实时信息发送.这种请求通常用于公告性质的响应,公告性质的响应无需客户端的任何请求参数,而是由服务器根据业务数据自 ...
- Ajax的简单请求案例
$.ajax({ url : rootPath +'/jasframework/choosepilecontrol/querySubsytem.do', type : "POST" ...
- AJAX实现简单的注册页面异步请求
p { margin: 0px; padding: 0px } AJAX简介 (1)AJAX = 异步 JavaScript 和 XML. (2)AJAX 是一种用于创建快速动态网页的技术. (3)通 ...
- jsonp其实很简单【ajax跨域请求】
js便签笔记(13)——jsonp其实很简单[ajax跨域请求] 前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资 ...
- 原创：【ajax | axios跨域简单请求+复杂请求】自定义header头Token请求Laravel5后台【亲测可用】
如标题:我想在ajax的header头增加自定义Token进行跨域api认证并调用,api使用laravel5编写,如何实现? 首先,了解下CORS简单请求和复杂请求. -- CORS简单请求 -- ...
- 简单ajax跨域请求
最近遇到需要ajax跨域的需求 首先看下不做任何处理特别处理的ajax跨域请求会出现什么样的错误 客户端代码: <script type="text/javascript"& ...
- 1、使用简单工厂模式设计能够实现包含加法（+）、减法（-）、乘法（*）、除法（/）四种运算的计算机程序，要求输入两个数和运算符，得到运算结果。要求使用相关的工具绘制UML类图并严格按照类图的设计编写程
1.使用简单工厂模式设计能够实现包含加法(+).减法(-).乘法(*).除法(/)四种运算的计算机程序,要求输入两个数和运算符,得到运算结果.要求使用相关的工具绘制UML类图并严格按照类图的设计编写程 ...
- jquery.ajax异步发送请求的简单测试
使用ajax异步发送请求到一般处理程序,判断输入的用户名和密码 1.添加Html页面,导入jquery 2.编写js代码和页面标签 <script type="text/javascr ...
- ajax跨域简单请求与复杂请求
开发网站时经常会用到跨域资源共享(简称cors,后面使用简称)来解决跨域问题,但是在使用cors的时候,http请求会被划分为两类,简单请求和复杂请求,而这两种请求的区别主要在于是否会触发cors预检 ...
随机推荐
- 在IOS开发中使用GoogleMaps SDK
一.申请一个免费的API KEY要使用GoogleMaps SDK,必须要为你的应用申请一个API KEY,API Key可以让你监视你的应用调用api的情况.api key是免费的,你可以在任何调用 ...
- C#开发奇技淫巧一：调试windows系统服务
原文:C#开发奇技淫巧一:调试windows系统服务 windows系统服务不能直接运行,只能在安装完服务之后启动.暂停.继续.停止服务,导致服务的调试不能使用一般的断点调试. 要调试系统服务,可以采 ...
- qt部分类释义
如果测试错误,输出包含源码的警告信息 Q_ASSERT Qtime最后一次star()或restar()到现在的毫秒数 QTime::elapsed QMetaObject::invokeMethod ...
- 《Docker 实战》第三章 Docker Hub 寻宝游戏
# 秘密仓库和密码 docker run --rm -it --name password dockerinaction/ch3_ex2_huntanswer
- Post utf-8 请求
/// <summary> /// POST请求与获取结果 /// </summary> public static string HttpPost(string Url, s ...
- wpf 深度复制控件,打印控件
原文:wpf 深度复制控件,打印控件 <Window x:Class="WpfApp2.MainWindow" xmlns="http://schemas.micr ...
- 【WPF】MVVM模式的3种command
原文:[WPF]MVVM模式的3种command 1.DelegateCommand 2.RelayCommand 3.AttachbehaviorCommand 因为MVVM模式适合于WPF和SL, ...
- delphi判断线程状态函数（使用GetExitCodeThread API函数去判断线程的句柄）
//判断线程是否释放//返回值:0-已释放:1-正在运行:2-已终止但未释放://3-未建立或不存在 function CheckThreadFreed(aThread: TThread): Byte ...
- 深入解析Android关机
下图详细阐释了Android的关机顺序. 第一步: 按住电源按钮半秒钟(500ms). 第二步: 之后,PhoneWindowManager.java 将捕获长按电源按钮这一事件并调用“interce ...
- SQLServer 进程无法向表进行大容量复制（错误号: 22018 20253）
原文:SQLServer 进程无法向表进行大容量复制 我的环境:SQL SERVER 2008 R2:发布者 ->SQL SERVER 2017 订阅者 进程无法向表“"dbo&quo ...