目录(已经更新的文章会有连接,从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原始方法,这次的方法明显简洁了许多。第三篇马上就会杀到。如果想这个系列的文章到底写些什么,请参见第一篇。
分享到:
相关推荐
Jquery.Pagination.js + Jquery.Ajax + ASP.NET----无刷新分页Pagination 1.5.1,是在原作者基础上修改的,因为Pagination 1.5.1与它的低版本有很大的区别,所以在此实例中增加了新版的使用方法
asp.net ajax调用aspx、ajax调用ashx处理类方法、ajax调用webservice方法,返回多种数据类型等xml、html等。
Flex+ASP.NET+Web应用开发实战详解-源代码
最新版本请点击: http://download.csdn.net/source/2926477 ...---------------------------------------------------------------------------- ...客户端使用 AJAX 心跳包拉数据,应用 JQuery 框架实现页面效果;
asp.net+query实现文件ajax上传。
asp.net+jquery+ajax无刷新用户注册,登录,修改密码
ASP.NET+SQL同学录源代码-课程设计-简洁的ASP.NET同学录程序,提供给大家方便大学学习使用。这个是为课程设计用的 ,有需要的同学可以试试。www.houlove.com供稿
ASP.NET.jQuery.Cookbook.pdf ASP.NET.jQuery.Cookbook.pdf 国外惊胆asp.net 结合jquery的书籍 高清电子版本,顺便锻炼英语水平。 本人从不吭兄弟
Asp.net 上传 Jquery.Uploadify HTML控件+Jquery.Uploadify 支持一次上传多个文件
本例采用asp.net C#+ jquery +ajax的实现 简单实用的例子 供大家学习
ASP.NET+jquery实现AJAX滚动滚动条加载数据的下拉列表控件
采用jquery.uploadify插件作为前台上传,服务台用c#异步处理
大型Ajax聊天室(ASP.NET+jQuery) ASP.NET+JQuery实现Ajax无刷新技术,程序比较简单,只有一个ajax.aspx是动态页面,其余全是静态页面。因此,本程序是您学习Ajax的好范例,其使用的JQuery插件,也是目前Ajax技术...
asp.net+Access+Ajax模仿google.rar asp.net+Access+Ajax模仿google.rar asp.net+Access+Ajax模仿google.rar
此文件是借助别人的基础上稍作修改 .net+xml+ajax.dll实现省市县三级联动无刷新代码例子
FastReport.Net+V2013.2.5+For+.Net4.0_附安装与破解_个人测试程序 1.首先安装FastReport.Net+V2013.2.5 For Net 4.0 的原始安装文件[FRNetDemo2010.msi] 2.将FastReport.Net+V2013.2.5+For+.Net4.0文件夹中的...
asp.net+jquery显示数据+分页
计算机专业毕业设计-ASP.NET+SQL 项目设计软件源码+WORD毕业论文文档合集: 计算机专业毕业设计-ASP+ACCESS仓库即时查询系统毕业设计(源代码+论文).rar 计算机专业毕业设计-ASP+ACCESS出租车管理系统(开题报告+源代码...
Aspnet-ASP.NET-Core-2-jQuery-Ajax-Modal-Form.zip,使用asp.net core 2 mvc jquery ajax bootstrap model formasp.net-core-2-jquery-ajax-model-form实现模式表单,asp.net是一个开源的web框架,用于使用.net构建...