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预检 ...
随机推荐
- 各种Message中文解释（一部分）
函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.该函数是应用程序和应用程序之间进行消息传递的主要手段之一. 函数原型:LRESUL ...
- 图像滤镜艺术---挤压(Pinch)滤镜
原文:图像滤镜艺术---挤压(Pinch)滤镜 Pinch滤镜 Pinch滤镜是通过坐标变换来实现以某个点(cenX,cenY)为中心,某个半径R内图像向其挤压变形的效果.实现这个滤镜的算法很多,主要 ...
- win10 uwp 如何打包Nuget给其他人
原文:win10 uwp 如何打包Nuget给其他人 本文告诉大家,如果自己有做一些好用的库,如何使用 Nuget 打包之后上传,分享给大家. 首先需要知道一些 Nuget 打包需要知道的,请看 wi ...
- WPF 调用API修改窗体风格实现真正的无边框窗体
原文:WPF 调用API修改窗体风格实现真正的无边框窗体 WPF中设置无边框窗体似乎是要将WindowStyle设置为None,AllowTransparency=true,这样才能达到WinForm ...
- 解决com.android.dex.DexException: Multiple dex files define Lcom/google/gson/JsonSerializer;
我在开发Windows Azure的Mobile Service(隔天补上创建过程)的安卓客户端时,报出了com.android.dex.DexException: Multiple dex file ...
- 轻量级 Material Design 前端框架 MDUI （纯html，css，与css框架跟react vue不冲突）
MDUI 是一个轻量级的 Material Design 前端框架,对照着 Material Design 文档进行开发,争取 1:1 实现 Material Design 中的组件. 多主题支持 M ...
- Delphi url 编码及转码及特殊字符串替换--百度和腾讯用的就是这个
先介绍一下,Delphi中处理Google的URL编码解码,其中就会明白URL编码转换的方法的 从delphi的角度看Google(谷歌)URL编码解码方式 在网上搜索了一下,似乎没有什么关于goog ...
- 避免用户重复点击按钮（使用Enable:=False，消息繁忙时会有堵塞的问题，只能改用Sleep）
// 现象描述:// 用户点击按钮后程序开始繁忙工作,这时候用户不知道是否成功,就继续点几次// 采用Enalbe = false ... = true的方式发现还会触发点击,分析原因如下 ...
- Windows下配置QT OpenCV
OpenCV-Study:Windows下配置OpenCV 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:XP OpenCV版本:2.4 ...
- HTML连载16-颜色控制属性2&标签选择器
一.颜色控制属性(上接连载15) (4)十六进制 在前端开发中通过十六进制来表示颜色,其实本质就是RGB,十六进制中是通过每两位表示一个颜色. 例如:#FFEE00,其中FF代表的是R,EE代表的G, ...