WEB前端

使用jQuery API发送AJAX请求

位置:首页 > WEB前端 > jquery教程,2016-03-07
WEB 应用中,异步请求的应用场景越来越多。比如使用AJAX处理表单,等等。如果你觉的自己是一个有逼格码农,你可以手动创建XMLHttpRequest,来处理A

WEB 应用中,异步请求的应用场景越来越多。比如使用AJAX处理表单,等等。如果你觉的自己是一个有逼格码农,你可以手动创建XMLHttpRequest,来处理AJAX请求。

//chrome firefox safari

xmlHttp=new XMLHttpRequest();

//IE

xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

当然,上面只是创建了底层处理AJAX的XMLHttpRequest对象,如何发送请求,如何处理返回结果。这里我就不讲了,因为我总觉得自己不是一个有逼格的程序员。那翠儿姐是如何完整处理这种异步请求呢?哈哈,当然是万能的jQuery。恩,believe it!

关于异步,jQuery提供了以下几个方法:

$.ajax   //ajax方法中有一个type参数,值是get和post二选一

$.get    //使用 HTTP GET 请求从服务器加载数据

$.post  //使用 HTTP POST 请求从服务器加载数据

$.load  //从服务器加载数据,返回给HTML页面

示例场景:

假设页面上有一个id为submit的按钮,当用户点击的时候向服务发送HTTP POST请求,请求中传递的数据是name=”张三”,pass=”123456″。然后用alert对象提示服务器响应是否成功。先用$.ajax方法实现:

$(“#hello”).click(function(){
$.ajax({ 
type:”post”,    //post请求
url:”test.jsp”,   //服务器端响应的页面
data:{‘name':’张三’,’pass':’123456′},   //向服务器传递的数据
dataType:”json”,     //服务器响应的数据格式,可以text、json、xml
success: function(data) {

 

  alert(“服务器响应成功!”);   //服务器返回的数据包含在data中

},
error:function(){
  alert(“服务器响应失败!”);
}
});
});

ok,就这样,是不是很简单呢?恩,确实。那如果使用$.get方法,如何请求呢??

$(“#hello”).click(function(){

$.get({

url:”test.jsp”,

data:{‘name':’张三’,’pass':’123456′},

dataType:”json”,

success:function(){

  alert(“服务器响应成功!”);  //服务器响应成功

},

error:function(){
         alert(“服务器响应失败!”);    //服务器响应失败
      }

});

});

亲爱的们,是不是很简单呢?

TAGS:jQuery APIjQuery AJAX

猜你喜欢

NewHot