本文摘自PHP中文网,作者coldplay.xixi,侵删。
AJAX教程 栏目实例介绍jQuery与JS实现AJAX的方法
相关免费学习推荐:ajax教程(视频)
AJAX准备知识:JSON
什么是 JSON ?
JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性,更易理解
* JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
合格的json对象:
1
[
"one"
,
"two"
,
"three"
]{
"one"
:1,
"two"
:2,
"three"
:3}{
"names"
:[
"张三"
,
"李四"
]}[{
"name"
:
"张三"
},{
"name"
:
"李四"
}]
不合格的json对象:
stringify与parse方法
JavaScript中关于JSON对象和字符串转换的两个方法:
JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象
1
2
3
JSON.parse(
'{"name":"Q1mi"}'
);
JSON.parse(
'{name:"Q1mi"}'
) ;
JSON.parse(
'[18,undefined]'
) ;
JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。
1
JSON.stringify({
"name"
:
"Q1mi"
})
和XML的比较
JSON 格式于2001年由 Douglas Crockford 提出,目的就是取代繁琐笨重的 XML 格式。
JSON 格式有两个显著的优点:书写简单,一目了然;符合 JavaScript 原生语法,可以由解释引擎直接处理,不用另外添加解析代码。所以,JSON迅速被接受,已经成为各大网站交换数据的标准格式,并被写入ECMAScript 5,成为标准的一部分。
XML和JSON都使用结构化方法来标记数据,下面来做一个简单的比较。
用XML表示中国部分省市数据如下:
1
<?xml version=
"1.0"
encoding=
"utf-8"
?><country><name>中国</name><province><name>黑龙江</name><cities><city>哈尔滨</city><city>大庆</city></cities></province><province><name>广东</name><cities><city>广州</city><city>深圳</city><city>珠海</city></cities></province><province><name>台湾</name><cities><city>台北</city><city>高雄</city></cities></province><province><name>新疆</name><cities><city>乌鲁木齐</city></cities></province></country>XML格式数据
XML格式数据
用JSON表示如下:
1
{
"name"
:
"中国"
,
"province"
:[{
"name"
:
"黑龙江"
,
"cities"
:{
"city"
:[
"哈尔滨"
,
"大庆"
]}},{
"name"
:
"广东"
,
"cities"
:{
"city"
:[
"广州"
,
"深圳"
,
"珠海"
]}},{
"name"
:
"台湾"
,
"cities"
:{
"city"
:[
"台北"
,
"高雄"
]}},{
"name"
:
"新疆"
,
"cities"
:{
"city"
:[
"乌鲁木齐"
]}}]}JSON格式数据
JSON格式数据
由上面的两端代码可以看出,JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读,并且在数据交换方面,由于 JSON 所使用的字符要比 XML 少得多,可以大大得节约传输数据所占用得带宽。
AJAX简介
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
示例
页面输入两个整数,通过AJAX传输到后端计算出结果并返回。
1
<!DOCTYPE html><htmllang=
"en"
><head><metacharset=
"UTF-8"
><metahttp-equiv=
"x-ua-compatible"
content=
"IE=edge"
><metaname=
"viewport"
content=
"width=device-width, initial-scale=1"
><title>AJAX局部刷新实例</title></head><body><inputtype=
"text"
id=
"i1"
>+<inputtype=
"text"
id=
"i2"
>=<inputtype=
"text"
id=
"i3"
><inputtype=
"button"
value=
"AJAX提交"
id=
"b1"
><scriptsrc=
"/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);}})})</script></body></html>HTML部分代码
HTML部分代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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)
views.py
views.py
rlpatterns = [
...
url(r
'^ajax_add/'
, views.ajax_add),
url(r
'^ajax_demo1/'
, views.ajax_demo1),
...
]
urls.py
AJAX常见应用情景
搜索引擎根据用户输入的关键字,自动提示检索关键字。
还有一个很重要的应用场景就是注册时候的用户名的查重。
其实这里就使用了AJAX技术!当文件框发生了输入变化时,使用AJAX技术向服务器发送一个请求,然后服务器会把查询到的结果响应给浏览器,最后再把后端返回的结果展示出来。
整个过程中页面没有刷新,只是刷新页面中的局部位置而已!
当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!
当输入用户名后,把光标移动到其他表单项上时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询名为lemontree7777777的用户是否存在,最终服务器返回true表示名为lemontree7777777的用户已经存在了,浏览器在得到结果后显示“用户名已被注册!”。
整个过程中页面没有刷新,只是局部刷新了;
在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作;
AJAX的优缺点
优点:
AJAX使用JavaScript技术向服务器发送异步请求;
AJAX请求无须刷新整个页面;
因为服务器响应内容不再是整个页面,而是页面中的部分内容,所以AJAX性能高;
jQuery实现的AJAX
最基本的jQuery发送AJAX请求示例:
1
<!DOCTYPEhtml><htmllang=
"zh-CN"
><head><metacharset=
"UTF-8"
><metahttp-equiv=
"x-ua-compatible"
content=
"IE=edge"
><metaname=
"viewport"
content=
"width=device-width, initial-scale=1"
><title>ajaxtest</title><scriptsrc=
"https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"
></script></head><body><buttonid=
"ajaxTest"
>AJAX测试</button><script>$(
"#ajaxTest"
).click(
function
(){$.ajax({ url:
"/ajax_test/"
, type:
"POST"
, data:{username:
"Q1mi"
,password:123456}, success:
function
(data){alert(data)}})})</script></body></html>
views.py:
1
def ajax_test(request): user_name = request.POST.get(
"username"
) password = request.POST.get(
"password"
)
print
(user_name, password)
return
HttpResponse(
"OK"
)
$.ajax参数
data参数中的键值对,如果值值不为字符串,需要将其转换成字符串类型。
1
defajax_test(request):user_name=request.POST.get(
"username"
)password=request.POST.get(
"password"
)
print
(user_name,password)returnHttpResponse(
"OK"
)
JS实现AJAX
1
varb2=document.getElementById(
"b2"
);b2.onclick=
function
(){
AJAX请求如何设置csrf_token
方式1
通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送。
1
2
3
$.ajax({ url:
"/cookie_ajax/"
,
type:
"POST"
, data:{
"username"
:
"Q1mi"
,
"password"
:123456,
"csrfmiddlewaretoken"
:
$(
"[name = 'csrfmiddlewaretoken']"
).val()
方式2
通过获取返回的cookie中的字符串 放置在请求头中发送。
注意:需要引入一个jquery.cookie.js插件。
1
2
3
$.ajax({ url:
"/cookie_ajax/"
, type:
"POST"
, headers:
{
"X-CSRFToken"
:$.cookie(
'csrftoken'
)},
success:
function
(data){console.log(data);}})
或者用自己写一个getCookie方法:
1
functiongetCookie(name){varcookieValue=null;
if
(document.cookie&&document.cookie!==
''
){varcookies=document.cookie.split(
';'
);
for
(vari=0;i<cookies.length;i++){varcookie=jQuery.trim(cookies[i]);
每一次都这么写太麻烦了,可以使用$.ajaxSetup()方法为ajax请求统一设置。
注意:
如果使用从cookie中取csrftoken的方式,需要确保cookie存在csrftoken值。functioncsrfSafeMethod(method){// these HTTP
1
methods
do
not
require
CSRF protectionreturn(/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));}$.ajaxSetup({ beforeSend:
function
(xhr,settings){
if
(!csrfSafeMethod(settings.type)&&!this.crossDomain){xhr.setRequestHeader(
"X-CSRFToken"
,csrftoken);}}});
如果你的视图渲染的HTML文件中没有包含 {% csrf_token %},Django可能不会设置CSRFtoken的cookie。
这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie。
1
django.views.decorators.csrf import ensure_csrf_cookie @ensure_csrf_cookie def login(request): pass
更多细节详见:Djagno官方文档中关于CSRF的内容
AJAX上传文件
XMLHttpRequest 是一个浏览器接口,通过它,我们可以使得 Javascript 进行 HTTP (S) 通信。XMLHttpRequest 在现在浏览器中是一种常用的前后台交互数据的方式。2008年 2 月,XMLHttpRequest Level 2 草案提出来了,相对于上一代,它有一些新的特性,其中 FormData 就是 XMLHttpRequest Level 2 新增的一个对象,利用它来提交表单、模拟表单提交,当然最大的优势就是可以上传二进制文件。下面就具体
首先看一下formData的基本用法:FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台。只需要把 form 表单作为参数传入 FormData 构造函数即可:
介绍一下如何利用 FormData 来上传文件。
1
django.views.decorators.csrfimportensure_csrf_cookie@ensure_csrf_cookiedeflogin(request):pass
或者使用
1
2
var
form = document.getElementById(
"form1"
);
var
fd =
new
FormData(form);
这样也可以直接通过ajax 的 send() 方法将 fd 发送到后台。
注意:由于 FormData 是 XMLHttpRequest Level 2 新增的接口,现在 低于IE10 的IE浏览器不支持 FormData。
练习(用户名是否已被注册)
功能介绍
在注册表单中,当用户填写了用户名后,把光标移开后,会自动向服务器发送异步请求。服务器返回这个用户名是否已经被注册过。
案例分析
页面中给出注册表单;
在username input标签中绑定onblur事件处理函数。
当input标签失去焦点后获取 username表单字段的值,向服务端发送AJAX请求;
django的视图函数中处理该请求,获取username值,判断该用户在数据库中是否被注册,如果被注册了就返回“该用户已被注册”,否则响应“该用户名可以注册”。
序列化
Django内置的serializers
1
2
def books_json(request): book_list = models.Book.objects.all()[0:10]
from django.core import serializers ret = serializers.serialize(
"json"
, book_list)
return
HttpResponse(ret)
以上就是实例讲解jQuery与JS实现AJAX 的详细内容,更多文章请关注木庄网络博客 !
相关阅读 >>
jq如何动态添加动态css样式
jquery、ajax 、json三者之间的关系
什么是ajax 跨域访问
jquery load中文乱码怎么办
jquery中html乱码怎么办
jquery选择器是什么
7种jquery $()函数的使用方法(总结)
javascript知识点总结之 jquery常用选择器和过滤选择器
浅谈jquery多库冲突问题的几种解决方法
jquery判断函数是否存在的方法
更多相关阅读请进入《ajax 》频道 >>
¥83.86元 人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 实例讲解jQuery与JS实现AJAX