Asp.Net+Jquery.Ajax详解3-$.get和$.post

来源:岁月联盟 编辑:exp 时间:2012-08-06

jQuery.get(url, [data], [callback], [type])

通过远程 HTTP GET 请求载入信息

 

参数——

url:为请求的url地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式,xml, html, script, json, text, _default。

 

get()方法提供了回调函数(callback),该函数有三个参数:responseText,textStatus,XMLHttpRequest,分别代表请求返回的内容、请求状态和XMLHttpRequest对象。

 

[javascript] 
 $.get("Data/GetServiceInfo.aspx",function(responseText,textStatus,XMLHttpRequest){ 
 
//responseText:请求返回的内容   
 
//textStatus:请求状态:success、error、notmodified、timeout  
 
//XMLHttpRequest:XMLHttpRequest对象   
 
}); 

 $.get("Data/GetServiceInfo.aspx",function(responseText,textStatus,XMLHttpRequest){

//responseText:请求返回的内容

//textStatus:请求状态:success、error、notmodified、timeout

//XMLHttpRequest:XMLHttpRequest对象

});

 

dataType 规定预计的服务器响应的数据类型。默认地,jQuery 将智能判断。可能的类型:"xml" "html" "text""script" "json" "jsonp"

jQuery.post与Jquery.get最大的区别在于,前者通过远程 HTTP POST 请求载入信息。后者通过远程HTTP GET请求载入信息。其他部分基本相同。

 

实例:

客户端——

[html] 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryAjaxGetPost.aspx.cs" Inherits="JqueryAjaxTest.JqueryAjaxGet" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Jquery Ajax Test</title> 
       <%--引入Jquery库--%> 
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
        $(function () { 
            //为各个按钮绑定事件 
 
            $("#TestGet").bind("click", GetWithCallback); 
            $("#TestPost").bind("click", PostWithCallback); 
        }); 
 
 
        //测试get,使用回调函数 
        //注意:get()方法提供了回调函数(callback),该函数有三个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象 
        function GetWithCallback(event) { 
 
            $.get("Data/GetServiceInfo.aspx", { "param": "TestGet-Callback" }, function (responseText, textStatus, XMLHttpRequest) { 
 
                $("#result").html("回调函数在起作用,结果:" + responseText); 
 
            }); 
        } 
 
        //测试post,使用回调函数 
        function PostWithCallback(event) { 
 
            $.post("Data/GetServiceInfo.aspx", { "param": "TestPost-Callback" }, function (responseText, textStatus, XMLHttpRequest) { 
 
                $("#result").html("回调函数在起作用,结果:" + responseText); 
 
            }); 
        } 
   
        </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
       
        <input id="TestGet" type="button" value="测试jquery.get" /> 
            <input id="TestPost" type="button" value="测试jquery.post" /> 
        <div id="result"> 
        </div> 
    </div> 
    </form> 
</body> 
</html> 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryAjaxGetPost.aspx.cs" Inherits="JqueryAjaxTest.JqueryAjaxGet" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Jquery Ajax Test</title>
       <%--引入Jquery库--%>
    <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //为各个按钮绑定事件

            $("#TestGet").bind("click", GetWithCallback);
            $("#TestPost").bind("click", PostWithCallback);
        });


        //测试get,使用回调函数
        //注意:get()方法提供了回调函数(callback),该函数有三个参数,分别代表请求返回的内容、请求状态和XMLHttpRequest对象
        function GetWithCallback(event) {

            $.get("Data/GetServiceInfo.aspx", { "param": "TestGet-Callback" }, function (responseText, textStatus, XMLHttpRequest) {

                $("#result").html("回调函数在起作用,结果:" + responseText);

            });
        }

        //测试post,使用回调函数
        function PostWithCallback(event) {

            $.post("Data/GetServiceInfo.aspx", { "param": "TestPost-Callback" }, function (responseText, textStatus, XMLHttpRequest) {

                $("#result").html("回调函数在起作用,结果:" + responseText);

            });
        }
 
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     
        <input id="TestGet" type="button" value="测试jquery.get" />
            <input id="TestPost" type="button" value="测试jquery.post" />
        <div id="result">
        </div>
    </div>
    </form>
</body>
</html>

服务端——

 

[csharp] 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.WebControls; 
 
namespace JqueryAjaxTest.Data 

    public partial class GetMethodInfo : System.Web.UI.Page 
    { 
        protected void Page_Load(object sender, EventArgs e) 
        { 
 
            string param = ""; 
 
            //获取参数  
            if (!String.IsNullOrEmpty(HttpContext.Current.Request["param"])) 
            { 
                param = HttpContext.Current.Request["param"]; 
            } 
             
            //清空缓冲区  
            Response.Clear(); 
            //将字符串写入响应输出流  
            Response.Write("Http请求的方式为:"+Request.HttpMethod.ToUpper()+"; 传递过来的参数为:"+param); 
            //将当前所有缓冲的输出发送的客户端,并停止该页执行  
            Response.End(); 
 
        } 
    } 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace JqueryAjaxTest.Data
{
    public partial class GetMethodInfo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            string param = "";

            //获取参数
            if (!String.IsNullOrEmpty(HttpContext.Current.Request["param"]))
            {
                param = HttpContext.Current.Request["param"];
            }
           
            //清空缓冲区
            Response.Clear();
            //将字符串写入响应输出流
            Response.Write("Http请求的方式为:"+Request.HttpMethod.ToUpper()+"; 传递过来的参数为:"+param);
            //将当前所有缓冲的输出发送的客户端,并停止该页执行
            Response.End();

        }
    }
}
 

补充一点:

 

对比load和get:

 

$.load()是最简单的从服务器获取数据的方法。它几乎与 $.get() 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 "notmodified" 时),$.load() 将匹配元素的 HTML 内容设置为返回的数据。

 

这也是为什么我们再上一篇的实例中这么用 $("#result").load()。而在这一篇的实例中这么用$.get()

 

 


作者:shan9liang