您的位置：首页 > Web前端 > JQuery

Asp.Net+Jquery.Ajax详解2-$.Load

2012-07-26 20:42 477 查看
目录（已经更新的文章会有连接，从7月25日开始，每2到3天更新一篇）：

Asp.Net+Jquery.Ajax详解1-开篇（2012.07.25发）

Asp.Net+Jquery.Ajax详解2-$.Load（2012.07.26发）

Asp.Net+Jquery.Ajax详解3-$.get和$.post（2012.07.30发）

Asp.Net+Jquery.Ajax详解4-$.getJSON（2012.07.31发）

Asp.Net+Jquery.Ajax详解5-$.getScript（2012.08.04发）

Asp.Net+Jquery.Ajax详解6-$.ajaxSetup（2012.08.06发）

Asp.Net+Jquery.Ajax详解7-全局Ajax事件（2012.08.09发）

Asp.Net+Jquery.Ajax详解8-核心$.ajax（2012.08.12发）

Asp.Net+Jquery.Ajax详解9-serialize和serializeArray（2012.08.15发）

Asp.Net+Jquery.Ajax详解10-JSON和XML+写在最后（2012.08.20发，结束啦！）

上一篇我们主要谈了什么是ajax，以及它的原始实现方式，简单介绍了Jquery。从这篇开始，我们将深入了解Jquery.ajax.从$.load开始。

jQuery.load( url [, data][, callback] )

url:请求网页的URL地址

data(可选):发送至服务器的key/value数据

callback(可选)：请求完成时的回调函数

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

$("#result").load("Data/GetServiceInfo.aspx",function(responseText,textStatus,XMLHttpRequest){

//responseText:请求返回的内容

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

//XMLHttpRequest:XMLHttpRequest对象

});

如果只需要加载GetServiceInfo.aspx页面内的某些元素，那么可以使用load()方法的URL参数来达到目的。通过为URL参数指定选择符，可以很方便地从加载过来的HTML文档里筛选出所需要的内容。

load()方法的URL参数的语法结构为：“url selector”。注意，URL和选择器之间有一个空格。

　

//测试load，使用选择器，过滤掉天津

function LoadFilter(event) {

$("#result").load("data/GetCity.aspx?resultType=html&t=" + (new Date()).getTime() + " ul>li:not(:contains('天津'))");

}

load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST方式。

//测试load，以Post方式请求，注意：默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式

function LoadPost(event) {

$("#result").load("Data/GetServiceInfo.aspx", { "param": "TestLoad-Post" });

}

注意：1、在load()方法中，无论Ajax请求是否成功，只要当请求完成（complete）后，回调函数（callback）就被触发

2、如果有参数，则在GetServiceInfo.aspx页面接收参数时，应该用HttpContext.Current.Request["param"]形式，Request.Querysting获取不到。

实例（vs2010）：

客户端—GetServiceInfo.aspx—

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

<!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 () {
//为各个按钮绑定事件
$("#TestLoad-Get").bind("click", LoadGet);
$("#TestLoad-Post").bind("click", LoadPost);
$("#TestLoad-Callback").bind("click", LoadCallback);
$("#TestLoad-Filter").bind("click", LoadFilter);
} );

//测试load，以Get方式请求
//加时间戳(new Date()).getTime()，防止返回缓存内容
function LoadGet(event) {
$("#result").load("Data/GetServiceInfo.aspx?param=TestLoad-Get&t=" + (new Date()).getTime());
}

//测试load，以Post方式请求，注意：默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式
function LoadPost(event) {
$("#result").load("Data/GetServiceInfo.aspx", { "param": "TestLoad-Post" });
}

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

$("#result").load("Data/GetServiceInfo.aspx", { "param": "TestLoad-Callback" }, function (responseText, textStatus, XMLHttpRequest) {

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

});
}

//测试load，使用选择器
function LoadFilter(event) {
$("#result").load("data/GetCity.aspx?resultType=html&t=" + (new Date()).getTime() + " ul>li:not(:contains('天津'))");

}

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="TestLoad-Get" type="button" value="Load-Get方式" />
<input id="TestLoad-Post" type="button" value="Load-Post方式" />
<input id="TestLoad-Callback" type="button" value="Load-回调函数" />
<input id="TestLoad-Filter" type="button" value="Load-过滤结果" />

<div id="result">
</div>
</div>
</form>
</body>
</html>


服务端1—GetCity.aspx—

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();

}
}
}


服务端2——

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 GetCity : System.Web.UI.Page
{
private string resultType = "json";
protected void Page_Load(object sender, EventArgs e)
{
//获取请求的参数
if (!String.IsNullOrEmpty(Request.QueryString["resultType"])) {

resultType = Request.QueryString["resultType"].ToLower()=="html" ? "html" : "json";
}
string  html = GetResult(resultType);

//清空缓冲区
Response.Clear();
//将字符串写入响应输出流
Response.Write(html);
//将当前所有缓冲的输出发送的客户端，并停止该页执行
Response.End();
}

private string GetResult(string resultType) {
string result = "";
if (resultType == "html") {

//返回的html
result = @"<ul><li id=""1"">北京</li><li id=""2"">天津</li></ul>";
}
else if (resultType == "json") {
//返回的json数据
result = @"
[{""pkid"":""0001"",""ProvinceId"":""BJ"",""CityName"":""北京"",""CityNameEn"":""Beijing"",""PostCode"":""010"",""isHotCity"":false},
{""pkid"":""0002"",""ProvinceId"":""TJ"",""CityName"":""天津"",""CityNameEn"":""Tianjin"",""PostCode"":""022"",""isHotCity"":false}]";

}
return result;
}
}
}


第二篇到了，对比第一篇中的ajax原始方法，这次的方法明显简洁了许多。第三篇马上就会杀到。如果想这个系列的文章到底写些什么，请参见第一篇。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航