目录:
- ajax介绍
- ajax模板
- 文件上传
- 基于ajax提交json格式数据
- 重点:设置请求与响应回来的解析编码格式
1. ajax介绍
异步的JavaScript和xml,跟后台交互,都用json
ajax干啥用的?前后端做数据交互:
-
之前学的跟后台做交互的方式:
第一种:在浏览器窗口输入地址(get)
第二种:用form表单提交数据
-
特点:
异步(异步和同步的区别:同步是请求发过去,要等着回应;异步:不需要等回应,可以进行其他操作)
局部刷新:
2. ajax 模板
$.ajax({
url:'/index/',
type:'post',
//data:往后台提交的数据
data:{'name':'lqz','age':18},
//成功的时候回调这个函数
success:function (data) {
alert(data)
}
})
3. 上传文件
-
模板层:
$("#btn").click(function () { //上传文件,必须用FormData,生产一个formdata对象 var formdata=new FormData(); formdata.append('name',$("#name").val()); //取出文件$("#myfile")[0].files拿到的是文件列表,取第0个把具体的文件取出来 formdata.append('myfile',$("#myfile")[0].files[0]); $.ajax({ url:'/files_ajax/', type:'post', //不预处理数据,(name=lqz&age=18) processData:false, //指定往后台传数据的编码格式(urlencoded,formdata,json) //现在用formdata对象处理了,就不需要指定编码格式了,不要给我编码了 contentType:false, data:formdata, success:function (data) { alert(data) } })
-
视图层: (跟form表单上传文件完全一样)
def files_ajax(request): # 提交文件从,request.FILES中取,提交的数据,从request.POST中取 name=request.POST.get('name') print(name) dic_files = request.FILES myfile = dic_files.get('myfile') with open(myfile.name, 'wb') as f: # 循环上传过来的文件 for line in myfile: # 往空文件中写 f.write(line) return HttpResponse('ok')
4. 基于ajax提交json格式数据
$("#ajax_test").click(function () {
var dic={'name':'lqz','age':18}
$.ajax({
url:'',
type:'post',
contentType:'application/json', //一定要指定格式 contentType: 'application/json;charset=utf-8',
data:JSON.stringify(dic), //转换成json字符串格式
success:function (data) {
console.log(data)
}
})
})
提交到服务器的数据都在 request.body 里，取出来自行处理
5. 设置请求与响应回来的解析编码格式
- 请求的编码方式:
contentType:'application/json',
-响应回来解析的方式
dataType:'json',
