Ajax 异步局部刷新
Ajax 异步局部刷新
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
实现json 字符串与 JavaScrip 对象得相互转换 JSON.parse()和 JSON.stringify()
1.序列化（将JavaScrip 转换为 json）使用 JSON.stringify()
console.log(JSON.stringify({'name':"baolin"}));
2.反序列化（将json转换为JavaScrip）使用 JSON.parse()
console.log(JSON.parse('{"name":"baolin"}'));
Ajax的语法以及ajax的参数 以及 contentType 传输JSON数据
1.Ajax语法：
<script>
// ajax 用户登录
$(".loginBnt").click(function () {
$.ajax({
url:"/login/",
type:"post",
// 发送信息至服务器时内容编码类型。用来指明当前请求的数据编码格式；urlencoded:?user=1&pwd=2；如果想以其他方式提交数据，比如contentType:"application/json"，即向服务器发送一个json字符串：
contentType:"application/json", // 默认 通过 application/x-www-form-urlencoded 可以省略
headers:{"X-CSRFToken":$.cookie('csrftoken')}, {# 通过headers 形式将csrftoken 数据传输到后端 #}
data:JSON.stringify({ // 通过JSON 形式发送数据需要先将数据 序列化 JSON.stringify()
user:$(".user").val(),
pwd:$(".pwd").val(),
}),
success:function (data) {
// data 是后端接收到 json字符串
var data=JSON.parse(data); {# 将json字符串序列化为js类型字典 #}
console.log(data["user"]);
if(data["user"]){
location.href="/index/"; {# 如果登录成功，在前端进行页面跳转 #}
}
else {
var error_msg = data["errorMsg"]; {# 如果登录不成功，取出后端发挥的错误信息 #}
$(".errorInfo").html(error_msg).css("color","red"); {# 将错误信息放到按钮后面 #}
setTimeout(function () { {# 3秒钟后 让提示信息消失 #}
$(".errorInfo").html("");
},3000)
}
}
})
})
</script>
2.后方接收到JSON字符串，反序列化取值：
from django.shortcuts import render,HttpResponse,redirect
import json
def log_in(request):
if request.method == "POST":
# b'{"user":"ssss","pwd":"sssssss"}' 接收到的数据为 b 需要decode数据
userinfo = request.body.decode("utf-8")
# 通过json将数据反序列化成 字典形式
userinfo=json.loads(userinfo)
# print(userinfo)
user = userinfo.get("user")
pwd = userinfo.get("pwd")
loginResponse={"user":None,"errorMsg":None}
if user == "lisi" and pwd == "123":
# 如果登录成功 start 一定有一个返回值
loginResponse["user"]=user
else:
loginResponse["errorMsg"]="用户名或密码错误"
return HttpResponse(json.dumps(loginResponse))
# return HttpResponse("OK")
return render(request,"login.html")
Csrf跨站请求伪造
向Django后台提交数据时，需要csrf_token验证所以需要定义该键值对；
一、使用jquery.cookie.js模块
1.先引用cookie.min.js
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
2.获取cookie中的csrftoken将值通过ajax传到后台
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<p>
<input type="text" class="num1">+<input type="text" class="num2">=<input type="text" class="ret">
<input id="cal" type="button" value="求和">
</p>
<script>
$("#cal").click(function () {
var num1=$(".num1").val(); // 获取 input 输入的 val值
var num2=$(".num2").val();
$.ajax({
url:"/cal/", {# 发送 ajax 的url #}
type:"post", {# 请求方式为 post或get #}
data:{ {# date 表示向后端发送的值，如果没有数据需要发送可以省略 #}
"num1":num1, {# 向后端提交得数据 #}
"num2":num2,
csrfmiddlewaretoken:$.cookie("csrftoken") // 当使用POST提交数据是，需要scrf_token验证,获取浏览器cookie值（固定写法）
},
success:function (data) { // 回调函数，如果该ajax执行成功返回该函数，date 为/send_ajax/返回的值
$(".ret").val(data) // 将返回得数据 写入到class 为 ret 得输入空中
}
})
});
</script>
二、设置Csrf验证以及向后端传送数据
1.定义csrf_token
{% csrf_token %}
2.伪造键值对向后端发csrfmiddlewaretoken 键值对
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
</head>
<body>
<p>
<input type="text" class="num1">+<input type="text" class="num2">=<input type="text" class="ret">
{% csrf_token %}
<input id="cal" type="button" value="求和">
</p>
<script>
$("#cal").click(function () {
var num1=$(".num1").val(); // 获取 input 输入的 val值
var num2=$(".num2").val();
$.ajax({
url:"/cal/", {# 发送 ajax 的url #}
type:"post", {# 请求方式为 post或get #}
data:{ {# date 表示向后端发送的值，如果没有数据需要发送可以省略 #}
"num1":num1, {# 向后端提交得数据 #}
"num2":num2,
csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val() // 当使用POST提交数据是，需要scrf_token验证 （固定格式）
},
success:function (data) { // 回调函数，如果该ajax执行成功返回该函数，date 为/send_ajax/返回的值
$(".ret").val(data) // 将返回得数据 写入到class 为 ret 得输入空中
}
})
});
</script>
方法三、通过请求头headers向后端传送Csrf数据
1.先引用cookie.min.js
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
2.通过headers形式将数据传输到后端,此方法比较优异，当数据比较大需要json序列化将数据传入后端时，使用此方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> // 引入 jquery.cookie
</head>
<body>
<p>
<input type="text" class="num1">+<input type="text" class="num2">=<input type="text" class="ret">
<input id="cal" type="button" value="求和">
</p>
<script>
$("#cal").click(function () {
var num1=$(".num1").val(); // 获取 input 输入的 val值
var num2=$(".num2").val();
$.ajax({
url:"/cal/", {# 发送 ajax 的url #}
headers:{"X-CSRFToken":$.cookie('csrftoken')}, {# 通过headers形式将数据传输到后端 #}
type:"post", {# 请求方式为 post或get #}
data:{ {# date 表示向后端发送的值，如果没有数据需要发送可以省略 #}
"num1":num1, {# 向后端提交得数据 #}
"num2":num2,
},
success:function (data) { // 回调函数，如果该ajax执行成功返回该函数，date 为/send_ajax/返回的值
$(".ret").val(data) // 将返回得数据 写入到class 为 ret 得输入空中
}
})
});
</script>
3.urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^cal/', views.cal),
]
4.views.py
def cal(request):
if request.method == "POST":
# 获取前端 ajax 传入得值
num1 = request.POST.get("num1")
num2 = request.POST.get("num2")
# 将值转换为 int 类型
ret = int(num1) + int(num2)
# 返回结果
return HttpResponse(ret)
return render(request,"cal.html")
通过Ajax实现页面的登陆功能
1.urls.py 路由配置
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^login/', views.login), # 页面登陆窗口
url(r'^index/', views.index), # 页面首页窗口
url(r'^logout/', views.log_out), # 退出用户
url(r'^reg/', views.reg), # 添加用户
url(r'^set_pwd/', views.set_pwd), # 修改当前用户密码
]
2.views.py 视图函数
from django.shortcuts import render, redirect, HttpResponse
from django.contrib import auth
from django.contrib.auth.models import User
from django.contrib.auth.decorators import login_required
import json
def login(request):
if request.method == "POST":
username = request.POST.get("user")
password = request.POST.get("pwd")
# 验证 通过 ajax 获取的 用户密码是否正确
users = auth.authenticate(username=username, password=password)
# 定义一个 字典，用于将数据 序列化 传给前端
loginResponse={"user":None,"errorMsg":None}
if users:
# 如果验证成功 定义 session 值
auth.login(request, users)
# 将字典user 赋值
loginResponse["user"]=username
else:
# 验证失败 在errorMsg 赋值
loginResponse["errorMsg"]="用户名或密码错误"
# 将字典返回给前端
return HttpResponse(json.dumps(loginResponse))
return render(request,"login.html")
# 使用Django自带得装饰器login_required 实现验证
# 验证失败跳转到 /login/ 路径,否则返回 index.html 页面
@login_required(login_url='/login/')
def index(request):
return render(request, "index.html")
3.login.html 前端模板展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
</head>
<body>
{#用户登录#}
<form action="">
{% csrf_token %}
<p>姓名 <input type="text" class="user"></p>
<p>密码 <input type="password" class="pwd"></p>
<input type="button" value="提交" class="loginBnt"><span class="errorInfo"></span>
</form>
<script>
// ajax 用户登录
$(".loginBnt").click(function () {
$.ajax({
url:"/login/",
type:"post",
data:{
user:$(".user").val(),
pwd:$(".pwd").val(),
csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val()
},
success:function (data) {
// data 是后端接收到 json字符串
var data=JSON.parse(data); {# 将json字符串序列化为js类型字典 #}
if(data["user"]){
location.href="/index/"; {# 如果登录成功，在前端进行页面跳转 #}
}
else {
console.log(data["errorMsg"]);
var error_msg = data["errorMsg"]; {# 如果登录不成功，取出后端发挥的错误信息 #}
$(".errorInfo").html(error_msg).css("color","red"); {# 将错误信息放到按钮后面 #}
setTimeout(function () { {# 3秒钟后 让提示信息消失 #}
$(".errorInfo").html("");
},3000)
}
}
})
})
</script>
</body>
</html>
####################index.html 模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
{# #}
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">{{ request.user }}</a></li>
<li><a href="/logout/">注销</a></li>
<li><a href="/reg/">添加用户</a></li>
<li><a href="/set_pwd/">修改密码</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</body>
</html>
Ajax 异步局部刷新的更多相关文章
- js(三) ajax异步局部刷新技术底层代码实现
ajax 异步 javaScript and xml 开发五步骤: 1. 创建对象 XMLHttpRequest(chrome,firefox) ie... jquery 2. 找到连接, http的 ...
- jquery ajax thinkphp异步局部刷新完整流程
环境:ThinkPHP3.2.3,jQuery3.2 前言: 在一般的网站中,都需要用到jquery或者其他框架(比如angular)来处理前后端数据交互,thinkphp在后台也内置了一些函数用 ...
- asp.net mvc3 利用Ajax实现局部刷新
1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...
- C# 利用ajax实现局部刷新
C#所有runat="server"的控件都会造成整个界面的刷新,如果想实现局部刷新,可以利用ajax. 需要加入的控件有ScriptManager和UpdatePanel,可以实 ...
- jQuery+ajax实现局部刷新
在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(),其他高级方法的使用以后再做详细笔记. 第一种: 当某几个页面 ...
- Ajax定时局部刷新
1.局部刷新一个地方 function refreshOnTime(){ $.ajax({ //配置 }); //7秒后重复执行该函数 setInterval('refreshOnTime', 700 ...
- [转载].NET ASP.NET 中web窗体（.aspx）利用ajax实现局部刷新
之前开发的一套系统中用到了大量的 checkboxList 控件,但是每次选定之后都会刷新整个页面,用户体验很差,百度了之后查到这篇文章,尝试了一下可以实现,所以转载了过来,记录一下,也给其他有相同困 ...
- Ajax+Js局部刷新
通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信.通过这个对象, JavaScript 可在不重载页面的情况与 Web ...
- 使用php后台给自己做一个页面路由，配合ajax实现局部刷新。
今天就要放假了,把近来囤积的小玩意儿总结整理一下. 在请求一个html页面来嵌入到当前页会有一个问题,就是跟随请求过来的html他的样式表和脚本会失效.是因为文档加载的先后顺序等问题造成的.因此,加载 ...
随机推荐
- 【Linux】虚拟服务器之LVS
写在前面 觉得甚是幸运,能够有机会参与到ITOO配置环境的工作中去.现在正在熟悉,在搭建环境的时候,有LVS安装配置教程,对这一块有些懵逼,这几天查了一些资料,写在这里,和大家分享一下 是什么 LVS ...
- CentOS6源码安装VSFTPD3
还是碰到老问题:安全扫描,由于CentOS6上VSFTPD最高支持到V2.2.2,目前已经是官方支持的最新版本(发布了几年...) 但有安全漏洞,又没法通过限制访问进行控制,只能想办法升级到最新版本了 ...
- lzstring
import lzstring ic = {"name": "root", "password": "123456"} ...
- 解决win10中chm内容显示为空白的问题
在win10中打开chm文件,一般会是这个效果,内容显示为空白: 解决这个问题的方法是,在打开chm文件时,会有个安全警告的询问对话框,如下: 将[打开此文件前总是询问(W)]复选框的勾去掉,就OK了 ...
- jvm 监控工具
背景 不懂jvm监控工具好意思说自己搞java的吗.其实搞了十多年的人我都见过不懂得,不懂不要紧,老实工作就行啊.这就是属于非技术的话题了,实在不知从何说起.还是赶紧学习下吧,可以去装了.我认真学习后 ...
- CF 545C
题意: 砍树, 树会向左或者向右倒,数不能倒重叠, 问最多可以砍多少树 思路: 贪心 + Dp吧, 树要尽可能网左倒,这样对后面的树影响较小, 才是最优状态 #include<iostream& ...
- 洛谷P3317 [SDOI2014]重建 [Matrix-Tree定理]
传送门 思路 相信很多人像我一样想直接搞Matrix-Tree定理,而且还过了样例,然后交上去一分没有. 但不管怎样这还是对我们的思路有一定启发的. 用Matrix-Tree定理搞,求出的答案是 \[ ...
- 幂的运算：X的n次幂
计算X的n次幂,有多种算法 例子:计算2的62次方. method 1 :time = 1527 纳秒. 常规思路,进行61次的乘法! private static long mi(long X, l ...
- Confluence 6 内存使用和需求和一些问题
系统备份和恢复 Confluence 的备份和恢复是与数据库中数据量的大小有关.这个操作可能会对 Confluence 的性能产生很多关键性的影响并且大量消耗内存.如果你在 Confluence 的 ...
- Confluence 6 缓存性能示例
有关 Confluence 的缓存性能如何设置,让我们看看下面的表: 缓存(Caches) % 使用的缓存(Used) % 有效率(Effectiveness) 对象/大小(Objects/Size) ...