本文已参与「新人创作礼」活动，一起开启掘金创作之路。

JQuery中的Ajax

Ajax方法

通过HTTP请求加载远程数据，$.ajax()返回其创建的XMLHttpRequest对象，大多情况下我们无需直接操作该函数，除非需要进行不常用的操作。

五个参数：

• url----表示请求的地址
• type----表示请求的类型GET或POST请求
• data----表示发送给服务器的数据，数据格式有两种：
  • 1、name = value&name = value
  • 2、{key:value}
• success----请求响应，响应的回调函数
• dataType----数据类型，常用的数据类型有：
  • text文本
  • xml数据
  • json数据

请求举例：

<script type="text/javascript">
    $(function(){
        //ajax请求
		$("#ajaxBtn").click(function(){
            url:"http://localhost:8080/web/ajaxServlet",
            data:"action = jQueryAjax",
            type:"GET",
            success:function(data){
                //alert("服务器返回的数据是：" + data);
                var jsonObj = JSON.parse(data);//如果下面dataType写的是json，则不需要自己再进行转换
                $("#msg").html(" ajax 编号:" + jsonObj.id + "，姓名：" + jsonObj.name);
            },
            dataType:"text"
        });
    });
</script>

GET方法

通过远程HTTP GET请求载入信息，这是一个简单的GET请求功能以取代$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数，则要使用$.ajax

四个参数：

• url----请求的url地址
• data----发送的数据
• callback----成功的回调函数
• type----返回的数据类型，有六种：
  • xml
  • html
  • script
  • json
  • text
  • _default

请求举例：

$("#getBtn").click(function(){
	$.get("http://localhost:8080/web/ajaxServlet","action = JQueryGet",function(data){
    	$("#msg").html(" ajax 编号:" + jsonObj.id + "，姓名：" + jsonObj.name);   
    },"json");
})

getJSON方法

三个参数：

• url----请求的url地址
• data----发送给服务器的数据
• callback----成功的回调函数

请求举例：

$("#getJSONBtn").click(function(){
	$.getJSON("http://localhost:8080/web/ajaxServlet","action = jQueryGetJSON",function(data){
	$("#msg").html("getJSON 编号：" + data.id + "，姓名：" + data.name);
	});
});

serialize方法

serialize()可以把表单中所有表单项的内容都获取到，并以name=value&name=value的形式进行拼接。

举例：

$("#submit").click(function(){
	$.getJSON("http://localhost:8080/web/ajaxServlet","action = jQuerySerialize&" + $("#form01").serialize(),function(data){
	$("#msg").html("Serialize 编号：" + data.id + "，姓名：" + data.name);
	});
});

这样就可以直接将序列化结果传递给服务器。