AJAX小示例
一、 基本内容
定义:AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”,即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)
作用:AJAX就是使用 js 技术发送请求和接收响应
优点:在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容
特点:
- 异步交互
- 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求
- 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求
- 局部刷新,无须刷新整个页面
- 传输的数据量少,性能高
- 异步交互
应用场景:
- 搜索引擎根据用户输入的关键字,自动提示检索关键字
- 注册时候的用户名的查重
普通示例:页面输入两个整数,通过AJAX传输到后端计算出结果并返回
# urls.py
urlpatterns = [
url(r'^ajax_add/', views.ajax_add),
url(r'^ajax_demo1/', views.ajax_demo1),
]
# views.py
def ajax_demo1(request):
return render(request, "ajax_demo1.html") def ajax_add(request):
i1 = int(request.GET.get("i1"))
i2 = int(request.GET.get("i2"))
ret = i1 + i2
return JsonResponse(ret, safe=False)
{# ajax_demo1.html #}
<input type="text" id="i1">+
<input type="text" id="i2">=
<input type="text" id="i3">
<input type="button" value="AJAX提交" id="b1"> <script src="/static/jquery-3.2.1.min.js"></script>
<script>
$("#b1").on("click", function () {
$.ajax({
url:"/ajax_add/",
type:"GET",
data:{"i1":$("#i1").val(),"i2":$("#i2").val()},
success:function (data) {
$("#i3").val(data);
},
error:function (error) {
console.log(error)
},
})
})
</script>
二、 jQuery实现的AJAX
最基本的jQuery发送AJAX请求示例
# views.py
def ajax_test(request):
user_name = request.POST.get("username")
password = request.POST.get("password")
print(user_name, password)
return HttpResponse("OK")
<button id="ajaxTest">AJAX 测试</button>
<script>
$("#ajaxTest").click(function () {
$.ajax({
url: "/ajax_test/",
type: "POST",
data: {username: "Q1mi", password: 123456},
success: function (data) {
alert(data)
}
})
})
</script>
$.ajax参数
- data参数中的键值对,如果值不为字符串,需要将其转换成字符串类型
三、 AJAX通过csrf的校验
前提条件:确保有csrftoken的cookie
- 在页面中使用{% csrf_token %}
- 加装饰器:ensure_csrf_cookie
- 注意:
- 如果使用从cookie中取csrftoken的方式,需要确保cookie存在csrftoken值
- 如果你的视图渲染的HTML文件中没有包含 {% csrf_token %},Django可能不会设置CSRFtoken的cookie。
- 这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie
AJAX请求如何设置csrf_token
- 通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送
$.ajax({
url: "/cookie_ajax/",
type: "POST",
data: {
"username": "Q1mi",
"password": 123456,
{# 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中 #}
"csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()
},
success: function (data) {
console.log(data);
}
})
- 通过获取返回的cookie中的字符串,放置在请求头中发送
- 注意:需要引入一个jquery.cookie.js插件
$.ajax({
url: "/cookie_ajax/",
type: "POST",
{# 从Cookie取csrftoken,并设置到请求头中 #}
headers: {"X-CSRFToken": $("[name = 'csrfmiddlewaretoken']").val()},
data: {"username": "Q1mi", "password": 123456},
success: function (data) {
console.log(data);
}
})
- 使用文件:自己写一个getCookie方法
- 粘贴在 static 下的 js 中的 一个js文件 ,比如:ajax_setup.js
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
// 通过js获取csrftoken的值
var csrftoken = getCookie('csrftoken'); // 使用$.ajaxSetup()方法为ajax请求统一设置
function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
} $.ajaxSetup({
beforeSend: function (xhr, settings) {
// 不是 GET|HEAD|OPTIONS|TRACE 这些请求的话,就执行if后的操作
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken); // 设置请求头,本质同方法2
}
}
});
AJAX小示例的更多相关文章
- 如何构建 MVC&AJax&JSon示例
背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 直接查看JSon部分 步骤: 1,添加控制器(HomeController)和动作方法(In ...
- 如何构建ASP.NET MVC4&JQuery&AJax&JSon示例
背景: 博客中将构建一个小示例,用于演示在ASP.NET MVC4项目中,如何使用JQuery Ajax. 步骤: 1,添加控制器(HomeController)和动作方法(Index),并为Inde ...
- ReactNative新手学习之路06滚动更新ListView数据的小示例
本节带领大家学习使用ListView 做一个常用的滚动更新数据示例: 知识点: initialListSize={200} 第一次加载多少数据行 onEndReached={this.onEndRea ...
- MVC客户端验证的小示例
MVC客户端验证的小示例 配置客户端验证的可用性: <configuration> <appSettings> <add key="ClientValidat ...
- jquery Ajax请求示例,jquery Ajax基本请求方法示例
jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...
- python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)
一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 from app01 import views urlpatterns = [ path('admin/', admi ...
- 第一个ajax小demo
第一个ajax小demo 文章来源:http://blog.csdn.net/magi1201/article/details/44569657
- 【.Net】Socket小示例
引言 项目中用到了Socket,这里做个控制台小示例记录一下. Client 客户端的Receive用了异步方法,保持长连接,可以随时发送消息和响应服务端的消息,如下 static string Cl ...
- CentOS7 安装 RocketMQ 实践和小示例
CentOS7 安装 RocketMQ 实践和小示例 1.通过 SSH 工具(比如 XShell)连接到 CentOS7 服务器上: 2.进入到 /usr/local 目录中: cd /usr/loc ...
随机推荐
- Linux(ubuntu) 一行代码搞定查看文件目录
ls 命令:• ls 是英文单词 list 的简写,其功能为列出目录的内容,是用户最常用的命令之一,类似于 DOS 下的 dir 命令 ls命令之后加各种参数的作用: ls -a 显示指定目录下所有子 ...
- [b0037] python 归纳 (二二)_多进程数据共享和同步_管道Pipe
# -*- coding: utf-8 -*- """ 多进程数据共享 管道Pipe 逻辑: 2个进程,各自发送数据到管道,对方从管道中取到数据 总结: 1.只适合两个进 ...
- PHP配置篇(一)--php开启redis扩展
因为最近要用到Redis,下面记录下如何给PHP开启redis的扩展. 一.安装redis 1.安装redis:https://github.com/MSOpenTech/redis/releases ...
- Python—时间模块(time)和随机模块(random)
时间模块 time模块 获取秒级时间戳.毫秒级时间戳.微秒级时间戳 import time t = time.time() print t # 原始时间数据 1574502460.90 print i ...
- luoguP3071 [USACO13JAN]座位Seating
https://www.luogu.org/problem/P3071 AC代码: https://www.luogu.org/blog/user33426/solution-p3071 莫名其妙RE ...
- C# WF 第12节 Timer控件
本节内容: 1:Timer控件的简介 2:实例1 : 不停的弹出,恶意exe 3:实例2: :流水灯 4:实例3:给流水灯加上计时器和在规定的时间进行播放音乐 1:Timer控件的简介 2:实例1 ...
- c# 第23节 外部方法
本节内容: 1:外部方法是什么 2:外部方法的实现 1:外部方法是什么 2:外部方法的实现 样式: 实现方式:很少 用自己多加练习把
- selenium中driver.close()和driver.quit()的不同点
driver.quit()与driver.close()的不同:driver.quit(): Quit this driver, closing every associated windows;dr ...
- jQuery中的事件对象(八)
Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 一.事件对象基本认识 1. 什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时 ...
- sqlserver deadlock
当时系统测试的时候,由于使用了自动化测试跑脚本,一下子出了很多sqlserver deadlock的问题. 都处于system test阶段了,哪儿还有时间仔细分析这些死锁是怎么出来的,直接上retr ...