内容概要
-
Ajax异步提交
-
前后端传输数据的编码格式
-
Ajax发送json格式数据
# python
import json
json.dumps
json.loads
# js
JSON.stringfy
JSON.parse -
Ajax发送文件数据
-
Ajax结合sweetalert插件实现删除的二次确认
1 Ajax
异步提交 局部刷新 """ 同步:提交任务之后原地等待任务结果期间不做任何事 异步:提交任务之后不原地等待任务结果 等任务产生结果通过异步回调机制 """ 前戏页面 博客园注册页面 github注册页面 能够发送网络请求的方法 a get请求 form表单 get请求、post请求 ajax get请求、post请求 ajax不是一门独立的语言 而是一个功能 能够实现ajax功能的书写方式有很多 eg:原生js代码 jQuery封装代码 组件框架代码... 我们这里学习jQuery版本 ajax前戏 需求:保证页面不刷新的情况下完成数字的和
2 基本语法
// ajax发送给后端 $.ajax({ url:'', // 控制提交地址 规律与form标签的action参数一致 type:'post', // 控制请求方式 data:{'i1':i1Val,'i2':i2Val}, // 发送的数据 success:function (args) { // 异步回调函数 {#alert(args)#} // 查看input框并且写入数据 $('#i3').val(args) } })
3 参数补充
contentType 前后端数据传输格式主要有三种 application/x-www-form-urlencoded multipart/form-data application/json 朝后端发送数据的时候针对不同的方式后端有不同的处理措施 # form表单默认是urlencoded编码格式 数据格式username=jason&password=234 django后端针对符合urlencoded格式的数据会自动解析并封装到request.POST中 django后端针对form-data格式的数据文件自动封装到request.FILES中 普通的符合urlencoded还是封装到request.POST中 # ajax默认是urlencoded编码格式 1.ajax发送json格式数据 django后端不做任何处理 直接以二进制形式存放在request.body中 data contentType 2.ajax发送文件数据 $('#d1').on('click',function () { // 1.先生成一个内置对象 let formDataObj = new FormData(); // 2.添加符合urlencoded格式的普通键值对数据 formDataObj.append('name','jason'); formDataObj.append('password',123); // 3.添加文件数据 formDataObj.append('myfile',$('#myfile')[0].files[0]); // ajax发送给后端 $.ajax({ url:'', // 控制提交地址 规律与form标签的action参数一致 type:'post', // 控制请求方式 data:formDataObj, // 发送的数据 // 额外指定两个参数 contentType:false, // 不采用任何编码 后端能够直接识别formdata对象 processData:false, // 不处理formdata对象 直接发送即可 success:function (args) { } }) }); dataType django后端如果使用JsonResponse给回调函数返回json格式字符串 回调函数会自动反序列成js中的自定义对象 django后端不使用JsonResponse而是自己通过json模块序列化的数据 回调函数接收到之后不会自动反序列
4 基于ajax实现二次确认
<script> $('.del_link').on('click',function (a) { var $aEle = $(this); var deleteId = $(this).attr('delete_id'); // 提示二次确认 res = confirm('你确定真的要删吗?'); // 判断是否删除 if (res){ // 发送ajax请求 $.ajax({ url:"/book_delete/" + deleteId, type:'get', data:{}, success:function (args) { // 1.页面刷新 不推荐使用 window.location.reload(); // 2.DOM操作 正规 用户体验好 $aEle.parent().parent().remove() } }) }else{ alert('怂逼不敢删啦') } }) </script>