Bootstrap

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

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(){
		//数据发送成功时回调
	}
);
;