lcy's blog

简述jQuery中前后端数据交互的四种方法

2018-12-28 08:46:54 lcy web开发

refer : http://www.cnblogs.com/dongsh/p/3235487.html

web开发中经常使用到异步请求,ajax技术不仅可以减少工作量，也可以优化用户体验。AJAX的四种异步请求方式都可以实现基本需求，接下来将分别描述。

1.$getJSON

$.getJSON()是专门为ajax获取json数据而设置的，其用法为： 

$.getJSON(  
    url,        //请求URL  
    [data],    //向后台发送的数据  
    [callback]  //回调函数  
);

url:string类型，表示发送请求的地址。
data:可选参数，待发送的key:value参数，与get、post中的data类似。
callback:可选参数，载入成功时的回调函数。
特别注意：$.getJSON是以GET方式提交数据，所以不能提交过大的数据，数据量较大时可选择$.post。 

// $.getJSON()应用实例  
function changeAns(id){  
    $.getJSON(  
        "/changeans",    //url  
        {id:id},    //数据  
        function(data){  //回调函数  
            if(data.error==0){  
                //do something  
                return true;  
            }else{  
                //do something  
                return false;  
            }  
        }  
    );  
}

2.$.get

$.get是以GET方式实现AJAX请求，提交短数据可用。 

$.get(  
    url,  
    [data],  
    [callback]  
);

url:string类型，请求地址
data:可选参数，发送至服务器的key:value数据会附加到请求URL中
callback:可选参数,ajax返回成功时自动调用该函数。 

// $.get()实例  
$.get(  
    "/ans",     //url  
    {id:id},    //data  
    function(data){//callback  
        if(data.error==0){  
            //do something  
            return true;  
        }else{  
            //do something  
            return false;  
        }  
    }  
);

3.$.post

可用于提交大量数据，比GET方式要安全。 

$.post(  
    url,  
    [data],  
    [callback],  
    [type]  
);

url:string类型，请求地址
data:可选参数，key:value形式数据
callback:可选参数,ajax返回成功时自动调用该函数
type:请求的数据类型，可以是html,xml,json等类型，如果没有设置则和$.get()返回格式一样，返回字符串。 

// 应用实例  
function changeMark(id){  
    $.post(  
        "/markquestion", //url  
        {id:id},  //data  
        function(data){//callback  
            if(data.error==0){  
                //do something  
                return true;  
            }else{  
                //do something  
                return false;  
            }  
        },  
        "json"   //data type  
    );  
}

4.$.ajax

$.ajax是一种常用的普通封装异步方式。 

$.ajax(options);

options是一个object类型，指明了Ajax调用的具体参数。 

// 应用实例  
$.ajax(  
    url:"/url",  
    datatype:"json",  
    type:"post",  
    success:function(){  
        //数据发送成功时回调  
    }  
);

评论

还没有登陆？评论请先登陆或 注册

还没有评论，抢个沙发吧！

 联系方式 contact me

Github
Email
QQ
Weibo

CopyRight © 2018 lcy's blog Designed by lcy

皖ICP备17026231号