ajax中get和post的提交、却别、错误处理以及注意事项

PHPABC JavaScript 2,344 次浏览 , , 没有评论

一、$.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...
        }  
   })

5-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,status,xhr){
     }
    })
   });

7.$.param()方法可对复杂的json进行字符串键值对解析

进阶:
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,status,statusText) 如:
2-1: $.ajax的error处理

    $.ajax({
        url:'www.phpabc.cn/test.php',
        type:'POST',
        data:'age=20',
        error:function(xhr,status,statusText){
            alert(xhr.status)
        }
    });

2-2:$.post的error错误处理,添加连缀的局部方法error,参数是(xhr,errorText,errorType)如:

    $.post('test.php','age=20',function(response,status,xhr){
         alert(response+"//"+xhr.status)
    }).error(function(xhr,errorText,errorType){
        alert('错误')
    });

也可以用全局的ajaxError方法如(1.8版本建议吧事件绑定在document上),但是参数有所不同(event,xhr,settings,errorType) 如:
$(document).ajaxError(function(event,xhr,settings,errorType){
event,xhr,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',
            type:'POST',
            data:$('form').serialize(),
            success:function(response,status,xhr){
                alert(请求成功后);
            },
            complete:function(){
                alert(请求完成后);
            },
            error:function(xhr,errorText,errorType){
                alert(请求错误后);
            },
            beforSend:function(){
                alert(请求之前);
            }
        })

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go