Asp.Net+Jquery.Ajax详解3-$.get和$.post
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