简介
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
特点
局部刷新:
这一特点给用户的感受是在不知不觉中完成请求和响应过程
异步提交:
客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
优缺点:
- AJAX使用Javascript技术向服务器发送异步请求；
- AJAX无须刷新整个页面；
- 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高
- 但是,请求频繁
jquery的json
JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象
eg:
console.log(JSON.parse('{"name":"Yuan"}'));
console.log(JSON.parse('{name:"Yuan"}')) ; // 错误
console.log(JSON.parse('[12,undefined]')) ; // 错误
JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。
eg: console.log(JSON.stringify({'name':"egon"})) ;
jquery实现的ajax
无参请求
<script>
// ajax的无参请求
$(".s1").click(function () {
// 当标签点击时触发ajax事件
$.ajax({
url:"/ajax_handle/", # 处理请求的url
type:"get", # 请求的方式
success:function (data) { # 成功时执行的回调函数,data值为视图函数(一般情况下
HttpResponse)返回值,
$(".name").html(data); # 做出处理
}
})
});
</script>
发送参数
$(".cal").click(function () {
$.ajax({
url:'/cal/', # 请求提交路径
# 请求方式默认为get
data:{"num1":$("#n1").val(),"num2":$("#n2").val()}, # 请求传递的数据,后端取值时根据
# data的键取
success:function (data) { # 回调函数
$("#sum").val(data)
}
})
})
其他的参数
请求参数
######################------------data---------################
data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式
(urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。
function testData() {
$.ajax("/test",{ //此时的data是一个json形式的对象
data:{
a:1,
b:2
}
}); //?a=1&b=2
######################------------processData---------################
processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，
那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString()
,最后得到一个［object，Object］形式的结果。
######################------------contentType---------################
contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；如果想以其他方式提交数据，
比如contentType:"application/json"，即向服务器发送一个json字符串：
$.ajax("/ajax_get",{
data:JSON.stringify({
a:22,
b:33
}),
contentType:"application/json",
type:"POST",
}); //{a: 22, b: 33}
注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象
另外Django在后台取数据时在request.POST是取不到的,数据位于request.body中,以字节的形式存储.
views.py: json.loads(request.body.decode("utf8")) ######################------------traditional---------################ traditional：一般是我们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]}, traditional为false会对数据进行深层次迭代； 响应参数 dataType： 预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。 默认不需要显性指定这个属性，ajax会根据服务器返回的content Type来进行转换； 比如我们的服务器响应的content Type为json格式，这时ajax方法就会对响应的内容 进行一个json格式的转换，if转换成功，我们在success的回调函数里就会得到一个json格式 的对象；转换失败就会触发error这个回调函数。如果我们明确地指定目标类型，就可以使用 data Type。 dataType的可用值：html｜xml｜json｜text｜script
post请求的注意事项
<script>
$("#user").blur(function () {
$.ajax({
url:"/jiaoyan_user/",
type:"post",
data:{"user":$("#user").val(),
"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},
# 在Django中请求需要验证csrf,data中也要传递csrf的键值对
success:function (data) {
var data=JSON.parse(data); # 将拿到的数据反序列化
if(data.is_reg){
$("#user").next().html("该用户已经注册").css("color","red")
}
}
})
})
</script>
Django的post请求验证除了html中的csrfmiddlewaretoken还存在于cookie中,关于验证的中间件若是找不到请求中的csrfmiddlewaretoken便会去请求头中查找
所以我们可以通过ajax设置请求头,来通过Django的验证
# 首先要导入js/jquery.cookie.js
<script src="{% static 'js/jquery.cookie.js' %}"></script>
$.ajax({
headers:{"X-CSRFToken":$.cookie('csrftoken')},
})
Ajax上传文件
# form表单上传文件
<form action="/upload_file/" method="post" enctype="multipart/form-data"> <p><input type="file" name="upload_file_form"></p> <input type="submit"> </form>
XMLHttpRequest Level 2添加了一个新的接口
FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.所有主流浏览器的较新版本都已经支持这个对象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
<h3>Ajax上传文件</h3>
<p><input type="text" name="username" id="username" placeholder="username"></p>
<p><input type="file" name="upload_file_ajax" id="upload_file_ajax"></p>
<button id="upload_button">提交</button>
{#注意button标签不要用在form表单中使用#}
<script>
$("#upload_button").click(function(){
var username=$("#username").val();
var upload_file=$("#upload_file_ajax")[0].files[0]; // input框中的文件对象
// 向form对象中添加键值对
var formData=new FormData();
formData.append("username",username);
formData.append("upload_file_ajax",upload_file);
$.ajax({
url:"/upload_file/",
type:"POST",
data:formData,
contentType:false, // 必须将这两项设置为false
processData:false, //
success:function(){
alert("上传成功!")
}
});
})
</script>