HTML之AJAX、GET、POST、GETJSON请求使用和同步操作-yellowcong

html的ajax请求是开发中常用到的， 基本上会遇到一些特别的地方，就是请求需要同步，不需要异步操作，这些GET、POST和AJAX以及GETJSON等操作，都是基于ajax的请求，可以完成网页的无刷新交互，提高用户体验效果。总结了请求操作需要注意的同步和异步操作

AJAX请求

$.ajax({  
          type : "post",  //使用提交的方法 post、get
          url : "register/RegisterState",   //提交的地址
          data : JSON.stringify({ name:"Donald Duck", city:"Duckburg" }),  //数据
          async : false,   //配置是否异步操作
          dataType："json",//返回数据类型的格式
          success : function(data){  //回调操作
            data = eval("(" + data + ")");  
            aDataSet = data;  
          }  
});

具体请参考http://www.w3school.com.cn/jquery/ajax_ajax.asp

ajax请求例子

//发送ajax请求
$.ajax({  
    type : "post",  //使用提交的方法 post、get
    url : "/user/update",   //提交的地址
    data:JSON.stringify(dataInfo),
    async : false,   //配置是否异步操作
  
    dataType:"json",//返回数据类型的格式
}).done(function ( result ) {//回调操作
	//结果正常的情况
	if(result.code == RESULT_OK){
		reloadGrid();
	}else{
		//添加失败的情况，提示信息
		showErrorInfo(result.msg);
	}
});

getJSON

//使用
jQuery.getJSON(url,data,success(data,status,xhr))

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)	可选。规定当请求成功时运行的函数。

额外的参数：

response - 包含来自请求的结果数据
status - 包含请求的状态
xhr - 包含 XMLHttpRequest 对象

例子

//设定取消异步请求
$.ajaxSettings.async = false;
//发送get请求
$.getJSON(
	"test.js", 
	{ name: "John", time: "2pm" },
	 function(json){ 
		 alert("JSON Data: " + json.users[3].name); 
	 }
);

GET&POST请求

GET请求

//使用方法
$.get(URL,callback);

参数说明

参数	描述
url	必需的 URL 参数规定您希望请求的 URL
callback	可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

重点注意，配置这个，再使用post和get请求就是同步的操作了

$.ajaxSetup({  
    async : false  
})

$.get(
	"demo_test.asp",
	function(data,status){ 
		alert("Data: " + data + "\nStatus: " + status); 
	}
);

POST请求

//使用方法
$.post(URL,data,callback);

参数说明

参数	描述
url	必需的 URL 参数规定您希望请求的 URL
data	参数规定连同请求发送的数据。
callback	可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

$.post(
	"demo_test_post.asp",
	 { name:"Donald Duck", city:"Duckburg" }, 
	 function(data,status){ 
		 alert("Data: " + data + "\nStatus: " + status); 
	}
);