ajax中get和post的提交、却别、错误处理以及注意事项
版权声明:本文为博主原创文章,未经博主允许不得转载。
<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> $.get和$.post的不同 1、get通过url提交的,post是通过http消息实体提交的 2、get提交大小限制为2kb,post不限制 3、get提交会被缓存下来,有安全隐患,post没有 4、get通过$_get[],而post通过$_POSt[]获取 $.get 和 $.post的几种传参方式 1、在url后面直接问号传参: test.php?age=20 2、以字符串键值对的方式传参: 'age=20' 3、以对象键值对的方式传参: {age:20} $.get 以上三种方式都支持,但是$.post和$.ajax只支持后2种写法 具体demo: 1、$.get('test.php?age=20',function(result){ alert(result) }) 2、$.get('test.php','age=20',function(result){ alert(result) }) 3、$.get('test.php',{age:20},function(result){ alert(result) }) ,php文件异步请求默认返回的是text或html的type类型,如果返回的是非json类型强制用type转成json类型可能会报错 三、getScript 一般就是引入一个js文件 $.getScript('demo.js') 即可 四:getScript 请求一个json文件,不必要指定返回的数据类型,而且如果制定了非json的type类型如type:html ,由于安全性高一点也不会返回html格式的数据 五、在用ajax 提交表单的时候可以用表单序列化获取表单的传参内容,而且传参的形式是字符串键值对,并且还会对url进行编码 $('form').serialize(); 如:$.ajax({ type:'POST', url:'text.php', data: $('form').serialize(), success:function(response,status,xhr){ dosomething... } }) 五-1;在一下html中可以用decodeURLComponent对序列化的数据进行解码 <form> <input type="checkbox" name="sex" value="男" id=""> <input type="checkbox" name="sex" value="女" id=""> </form> <div id="box"></div> <script> $('form input[name=sex]').click(function(){ $('#box').html(decodeURLComponent($(this).serialize())) }) </script> 5-2,以上的例子可以用serializeArray()可将数据格式化为json格式 六;ajaxSetup 是对ajax进行初始化,应用场景当多个ajax重复用到某些数据的时候可以分装起来如: $.ajaxSetup({ type:'POST', url:'text.php', data:'{}' }); $('form :submit').click(function(){ $.ajax({ success:function(response,xhr){ } }) }); 7.$.param()方法可对复杂的json进行字符串键值对解析r 进阶: 8、$.ajaxstart()和$.ajaxStop()放置加载时间过长处理 在jq1.8版本后必须绑定在document上如: $(document).ajaxStart(function(){ $('.loading').show() }).ajaxStop(function(){ $('.loading').hide() }); 8-1 如果加载超时,可以用timeout设置超时限制 =============== $.ajax进阶 1、加载请求 $.ajaxStart() 、$.ajaxStop 可以在对用户等待时间加载loading图片 2、错误处理 $.ajax的错误处理 可以在自己当前添加error方法,参数是(xhr,statusText) 如: 2-1: $.ajax的error处理 $.ajax({ url:'www.SEOgjgsdggd.com/test.php',type:'POST',data:'age=20',error:function(xhr,statusText){ alert(xhr.status) } }); 2-1:$.post的error错误处理,添加连缀的局部方法error,errorText,errorType)如: $.post('test.php',function(response,xhr){ alert(response+"//"+xhr.status) }).error(function(xhr,errorType){ alert('错误') }); 也可以用全局的ajaxError方法如(1.8版本建议吧事件绑定在document上),但是参数有所不同(event,xhr,settings,errorType) 如: $(document).ajaxError(function(event,errorType){ event,settings都是对象,event一般就用(type,target)属性,settings一般就用(url,type); }); 3/ 请求全局事件有 $.ajaxstart(),$.ajaxstop()、$.ajaxError(),$.ajaxSuccess(),$.ajaxComplete,$.ajaxSend() 前三个是请求时出发的全局事件, $.ajaxSuccess() 对应一个局部方法 .success(); $.ajaxComplete()对应一个局部方法 .complete(); $.ajaxSend()没有对应的局部方法,只有属性beforeSend 例子: $(document).ajaxSend(function(){ alert(发送请求之前); }).ajaxComplete(function(){ alert(请求成功和失败之后都会出现,是出现在成功或者失败的后面); }).ajaxSuccess(function(){ alert(请求成功后); }).ajaxError(function(){ alert(请求失败后); }) $.post('test.php',$('form').serialize()).success(function(){ alert(请求成功后); }).complete(function({ alert(请求完成后); }).error(function(){ alert(请求失败后); }) $.ajax({ url:'test.php',data:$('form').serialize(),success:function(response,xhr){ alert(请求成功后); },complete:function(){ alert(请求完成后); },errorType){ alert(请求错误后); },beforSend:function(){ alert(请求之前); } }) </body> </html>(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- ruby-on-rails – ruby?? / rails NoMethodError
- dojo datagrid IE9 editing status
- postgresql rank() over, dense_rank(), row_num
- Swift类扩展使用方法
- 依赖注入 – 使用@Resource使用Java EE 6和Glass
- c# – 另一台计算机上的目录 – 登录凭据
- c – 使用SSL的boost :: asio – SSL错误后的问题
- cocos2d-x – Cocos2dx:Sprite3D不会渲染到纹理
- reactos操作系统实现(11)
- 如何使用ajax请求重置ASP.Net会话状态超时