一、 基本内容
定义：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 #}
+
=
$("#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)
},
})
})
二、 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")
AJAX 测试
$("#ajaxTest").click(function () {
$.ajax({
url: "/ajax_test/",
type: "POST",
data: {username: "Q1mi", password: 123456},
success: function (data) {
alert(data)
}
})
})
$.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
}
}
});
如何构建 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客户端验证的小示例 配置客户端验证的可用性:
C语言之可变参实现scanf函数
既然有printf函数可变参实现,那就一定有scanf函数的可变参实现.废话不多说,源码奉上: 本源码不过多分析,如要明白原理,请翻本博客以往的文章看说明. 欢迎关注新浪微博:http://weibo ...
快速学习hadoop只有这些基础可不行
“学习hadoop需要什么基础”这已经不是一个新鲜的话题了,随便上网搜索一下就能找出成百上千篇的文章在讲学习hadoop需要掌握的基础.再直接的一点的问题就是——学Hadoop难吗?用一句特别让人无语 ...
8I - 吃糖果
HOHO,终于从Speakless手上赢走了所有的糖果,是Gardon吃糖果时有个特殊的癖好,就是不喜欢将一样的糖果放在一起吃,喜欢先吃一种,下一次吃另一种,这样:可是Gardon不知道是否存在一种吃 ...
nodejs 遍历文件夹下所有的图片改名为中文
安装依赖 $ npm init -y && npm i fs-extra globby request -S main.js const fs = require('node-fs-e ...
网络编程初探--使用UDP协议的简易聊天室
UDP是一种无连接的传输层协议,提供快速不可靠的服务. 一.发送端 * 创建UDP发送端 * 步骤: * 1.建立UDP的Socket服务 * 2.将要发送的数据封装到数据包中 * 3.通过UDP的s ...