当前位置： 移动技术网 > IT编程>开发语言>.net > Asp.Net+Jquery.Ajax详解3-$.get和$.post

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

2018年11月05日  | 移动技术网IT编程  | 我要评论

黑蝴蝶白蝴蝶,南川新闻,辣妹街头篮球

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.x",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" ""> 
 
<html xmlns=""> 
<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"> 
    <p> 
       
        <input id="testget" type="button" value="测试jquery.get" /> 
            <input id="testpost" type="button" value="测试jquery.post" /> 
        <p id="result"> 
        </p> 
    </p> 
    </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" "">

<html xmlns="">
<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">
    <p>
     
        <input id="testget" type="button" value="测试jquery.get" />
            <input id="testpost" type="button" value="测试jquery.post" />
        <p id="result">
        </p>
    </p>
    </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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网