jQuery中调用ajax的4种方法：$.get、$.post、$getJSON、$ajax 介绍

1、$.get

$.get()方法使用GET方式来进行异步请求，它的语法结构为：

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

解释一下这个函数的各个参数：

url：string类型，ajax请求的地址。

data：可选参数，object类型，发送至服务器的key/value数据会作为QueryString附加到请求URL中。

callback：可选参数，function类型，当ajax返回成功时自动调用该函数。

最后写一个$.get()的实例供大家参考：

$.get(
    "submit.aspx",{
        id:     '123',
        name:   '芭蕉园',
    },function(data,state){
        //这里显示从服务器返回的数据
        alert(data);
        //这里显示返回的状态
        alert(state);
    }
)

2、$.post()

$.post()方法使用POST方式来进行异步请求，它的语法结构为：

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

这个方法和$.get()用法差不多，唯独多了一个type参数，那么这里就只介绍type参数吧，其他的参考上面$.get()的。

type：type为请求的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和$.get()返回的格式一样，都是字符串的。

最后写一个$.post()的实例供大家参考：

$(".teacherCell").click(function(){
		//1 把course.id接收到，存到窗口中的隐藏变量中。
		$("#tw [name='course.id']").val(this.lang);
		//2 根据course.id得到course.name，显示在窗口。
		$.post("${pageContext.request.contextPath}/course/get",{"course.id":this.lang},function(data){
			$("#courseName").html(data.split("!")[1]);
		});
		$('#tw').window('open');	
	});

3、$.getJSON()

$.getJSON()是专门为ajax获取json数据而设置的，并且支持跨域调用，其语法的格式为：

getJSON(url,[data],[callback])

url：string类型，发送请求地址 data ：可选参数，待发送 Key/value 参数，同get，post类型的data callback ：可选参数，载入成功时回调函数，同get，post类型的callback

JSON是一种理想的数据传输格式，它能够很好的融合与JavaScript或其他宿主语言，并且可以被JS直接使用。使用JSON相比传统的通过 GET、POST直接发送“裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的 ajax()函数的一个简化版本。这个函数也是可以跨域使用的，相比get()、post()有一定优势。另外这个函数可以通过把请求url写成"myurl?callback=X"这种格式，让程序执行回调函数X。

 $(".picture").click(function(){
		 layer.use('extend/layer.ext.js');
		 $.getJSON("${pageContext.request.contextPath}/picture/getPic.action",{"picture.uid":this.lang},function(data){
			 layer.photos({
				   html:"",
				  json:data
				 });
			 });
	 });

4、$.ajax()

$.ajax()是jquery中通用的一个ajax封装，其语法的格式为：

$.ajax(options)

async值为true 表示异步（不写默认为异步），等待服务器响应过程会先执行后面的代码。

async值为false 表示同步，等待服务器响应后才会执行后面的代码。

参考代码

$("[type='submit']").click(function(){
		var myurl="${pageContext.request.contextPath}/student/checkpwd";
		var flag=true;
		$.ajax({
			type:"POST",
			async:false,
			url:myurl,
			data:{"student.id":"${STUDENT.id}","student.pwd":$("#oldPwd").val()},
			success: function(data)
			{
				if(data=="0")
				{
					$("#msg").html("旧密码输入错误");
					flag=false;
				}
			}			
		});
		if(!flag)
		{
			return flag;
		}

jQuery中调用ajax的4种方法：$.get、$.post、$getJSON、$ajax 介绍

猜你喜欢