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预检 ...
随机推荐
- [转]Nodejs开发框架Express4.x开发手记
Express: ?web application framework for?Node.js? Express 是一个简洁.灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性,帮 ...
- WPF IDataErrorInfo使用-数据对象上验证
<Window x:Class="DataBindingExam.MainWindow" xmlns="http://schemas.microsof ...
- WCF调试日志
WCF调试,打不了断点or远程调试时,在配置文件的<configuration>结点下面加一段,就可以在对应位置查看服务器调试日志了,远程调试完毕发送亦可! <system.diag ...
- 【shell】gerrit同步备份脚本的实现
本期分享下gerrit如何实现备份,由于之前的一台代码服务器直接down掉,所以为了以防万一,开始备份gerrit数据,有人说,gerrit不过是个审查代码的工具,备份这个做什么,git是分布式代码管 ...
- C# GetFiles
var path = AppDomain.CurrentDomain.BaseDirectory + "Images\\Rooms\\"; // string[] patterns ...
- Centos重启关机命令
Linux centos重启命令: 1.reboot 普通重启 2.shutdown -r now 立刻重启(root用户使用) 3.shutdown -r 10 过10分钟自动重启(root用户 ...
- 剖析Qt的事件机制原理（源代码级别）
在用Qt写Gui程序的时候,在main函数里面最后依据都是app.exec();很多书上对这句的解释是,使Qt程序进入消息循环.下面我们就到exec()函数内部,来看一下他的实现原理.Let's go ...
- 解释为什么.net 第一次请求比较慢
通过这个图可以很好的解释为什么第一次请求比较慢,为了提高访问速度,也便有了预编译. 关于ASP.NET网站:每个页面都编译成一个.dll文件 用Assembly.GetExecutingAssembl ...
- Webapi实现websocket实时通讯
应用场景:前端页面发起一个websocket请求与后端进行实时通讯.后端监听某端口获取数据,将监听到的数据加工处理,通过websocket发送到前端. 这里只提供后台的处理方案仅供参考. 1.后端监听 ...
- java统计文本中单词出现的个数
package com.java_Test; import java.io.File; import java.util.HashMap; import java.util.Iterator; imp ...