Ajax

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
总结为:异步提交 局部刷新
注:使用Ajax的前提为导入了jQuery

Ajax的基本用法

$.ajax(
	**指定朝哪个后端发送ajax请求**
	url:' '(如果为空向本地址发送)
	**请求方式**
	type:''(如果为空默认为get)
	**数据**
	data:''(传输数据)
	**回调函数:当后端给你返回结果的时候会自动触发 args接受后端的返回结果**
	success:function  (args){
		执行结果
}
)

注:
针对后端如果是用HttpResponse返回的数据 回调函数不会自动帮你反序列化
如果后端直接用的是JsonResponse返回的数据 回调函数会自动帮你反序列化
使用HttpResponse序列化的解决方式
1.自己在前端利用JSON.parse()
2.在ajax里面配置一个参数

前后端传输数据的编码格式(contentType)

在此不写出验证!只有结果
无论是form表单还是ajax,它们前后传输数据的编码格式都为urlencoded
数据格式为:属性值=属性名&属性值=属性名&……

唯一不同的点在于form无法传输json格式而ajax是可以传输的,具体的判断方法可以使用request.POST看看是否有json格式传入!

ajax传入json格式

前端

 $.ajax({
        url:'',
        type:'post',
        data:JSON.stringify({'username':'jason','age':25}),
        contentType:'application/json',  // 指定编码格式
        success:function () {
        }
    })

后端

	if request.is_ajax():(判断当前请求是否为ajax请求)
		json_str=request.body.decode('utf-8') (request.body为接受ajax数据的对象)
		json_dict=json.loads(json_str)
	
	以下为简略版本
	if request.is_ajax():(判断当前请求是否为ajax请求)
		json_str=request.body
		json_dict=json.loads(json_str)(在json.load中传入二进制会自动解码反序列化)

**
注:
ajax发送json格式数据需要注意
1.contentType参数指定成:application/json
2.数据是真正的json格式数据
3.django后端不会帮你处理json格式数据需要你自己去request.body获取并处理
**

ajax发送文件

ajax中有一个内置对象FormData 这是专门用来处理文件发送的

前端

// 1 需要先利用FormData内置对象
let formDateObj = new FormData();
// 2 添加普通的键值对
formDateObj.append('username',$('#d1').val());
formDateObj.append('password',$('#d2').val());
// 3 添加文件对象
formDateObj.append('myfile',$('#d3')[0].files[0])
// 4 将对象基于ajax发送给后端
$.ajax({
   url:'',
   type:'post',
   data:formDateObj,  // 直接将对象放在data后面即可

   // ajax发送文件必须要指定的两个参数
   contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象
   processData:false,  // 告诉你的浏览器不要对你的数据进行任何处理

   success:function (args) {
   }
})

后端

if request.is_ajax():
        if request.method == 'POST':
            print(request.POST)
            print(request.FILES)

**
注意与总结:
1.需要利用内置对象FormData
// 2 添加普通的键值对(可选)
formDateObj.append(‘username’,KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲d1').val()); fo…(’#d2’).val());
// 3 添加文件对象
formDateObj.append(‘myfile’,$(’#d3’)[0].files[0])
2.需要指定两个关键性的参数
contentType:false, // 不需使用任何编码 django后端能够自动识别formdata对象
processData:false, // 告诉你的浏览器不要对你的数据进行任何处理
3.django后端能够直接识别到formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中 文件数据自动解析并封装到request.FILES中
**

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值