一、Ajax特点
二、Ajax的请求过程
三、Ajax发get/post请求例子
四、请求头之contentType含义
五、基于form表单和Ajax的文件上传
六、Ajax发送json格式数据
---------------------------------------------------------------------------
一、Ajax特点
回顾一下:前端可以通过哪些途径给服务器发请求?
1、浏览器地址栏,默认是get请求
2、form表单:get请求/post请求
3、a标签,默认是get请求
4、Ajax请求,get/post
两个特点:1 异步请求 2 局部刷新
二、Ajax的请求过程
要把Ajax请求绑定到某事件里,因为是js发的
$(".Ajax").click(function(){ $.ajax({ //请求url,IP:Port不写是当前页面的ip+port url:"/test_ajax/", type:"get", //请求方式,可以是post //success是回调函数,对浏览器返回的data进行处理 //data:返回的响应体的内容 success:function(data){ console.log(data) } }); });
请求过程:
三、Ajax发get/post请求例子
1、ajax发送get请求: $(function(){ $.ajax({ //请求url,IP:Port不写是当前页面的ip+port url:'/test_ajax/', type:'get', //请求参数,放在路径的?后面 data:{a:1, b:2}, //成功之后调用,data是响应体内容 success:function(data){ console.log(data); $('body').html(data); }, error:function(err){console.log(err);} //出错打印err信息 }); }); 2、ajax请求json数据。服务器端用HttpJson返回 $(function(){ //指定返回数据的类型 $.ajax({ url:'/test_ajax/', type:'get', dataType:'json',//设置返回的数据的数据类型为json success:function(data){ console.log(data.name); $('.box').text(name); }, error:function(err){console.log(err);} }); }); 3、ajax发送post请求:(会被Django的CSRF阻止,后面说怎么处理) $(function(){ $.ajax({ url:'/test_ajax/', type:'post', data:{ "name":"alex", "pwd":"123"
"csrfmiddlewaretoken":$('input[name="csrfmiddlewaretoken"]').val()
}, success:function(data){ console.log(data); }, error:function(err){console.log(err);} }); });
四、请求头之contentType含义
------------------------------------------------
请求头之contentType:指定请求的编码格式
常见的三种值
1.contentType="application/x-www-form-urlencoded"
不写都是默认这种格式,告诉服务端:请求体数据会以键值对方式提交:a=1&b=2&c=3
服务端放在request.POST 由request.body解析而来
2.enctype="multipart/form-data"
这是文件上传的编码格式
服务端放在request.FILES
3.enctype="application/json"
这是告诉服务端:请求体的数据是json格式 '{a=1,b=2,c=3}'
服务端放在request.body 这是元数据,存请求报文中的请求体,先解码,再反序列化
-------------------------------------------------
五、基于form表单和Ajax的文件上传
1、基于form表单的文件上传
form表单里要加:enctype="multipart/form-data"
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit">
</form>
views视图函数:
request.FILES #文件存放在这里
file_obj = request.FILES.get("file")
with open(file_obj.name, "wb") as f:
for line in file_obj:
f.write(line)
2、基于ajax的文件上传
<form action="" method="post">
用户名 <input type="text" id="user">
文件 <input type="file" id="file">{% csrf_token %}
<input type="button" values="上传">
</form>
$("#file").change(function () {
//这个要构建formdata对象,相当于定义contentType=multiform
var formdata = new FormData();
//ajax取文件对象固定写法:$("#file")[0].files[0]
formdata.append("file", $(this)[0].files[0]);
formdata.append("csrfmiddlewaretoken",
$('input[name="csrfmiddlewaretoken"]').val());
$.ajax({
url: "{% url 'customer_import' %}",
type: 'post',
// 用这个就要固定加上面两个false参数
contentType: false,
processData: false,
data: formdata,
success: function (data) {
console.log(data);
}
,
error: function (err) {
console.log(err);
}
});
})
六、Ajax发送json格式数据
ajax发json格式数据,指定contentType:"application/json"
$(function(){
$.ajax({
url:'/test_ajax/',
type:'post',
contentType:"application/json",
data:JSON.stringfy({
a:1,
b:2
}),
success:function(data){
console.log(data);
},
error:function(err){console.log(err);}
});
});