- 浏览: 492347 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (329)
- [发布至博客园首页] (12)
- [随笔分类][01] .Net X (59)
- [随笔分类][20] Architecture (16)
- [随笔分类][21] Developer Logs (13)
- [网站分类]Windows 7 (1)
- [随笔分类][13] Oracle & .Net (7)
- [随笔分类][16] Love in China (14)
- [随笔分类][15] Development Tools (20)
- [随笔分类][18] Windows Phone (12)
- [随笔分类][12] Design & Pattern (17)
- [网站分类].NET新手区 (22)
- [网站分类]首页候选区 (2)
- [随笔分类][08] Windows (Server) (13)
- [随笔分类][02] CSLA.Net (3)
- [随笔分类][10] jQuery & javaScript (10)
- [随笔分类][11] SQL Server (4)
- [随笔分类][22] Enterprise Logs (3)
- [随笔分类][03] News (9)
- [随笔分类][19] Quality Assurance (2)
- [随笔分类][05] Silverlight (20)
- [随笔分类][14] Google Earth & .Net (6)
- [网站分类]非技术区 (9)
- [随笔分类][07] WWF (2)
- [随笔分类][04] SharePoint (1)
- [随笔分类][20] Analysis & Design (36)
- [随笔分类][06] WCF (5)
- [随笔分类][12] Architecture (1)
- [随笔分类][09] WPF (0)
- [随笔分类][17] VStudio & Expression (5)
最新评论
-
zhangyy130:
你好,我关于第二段的那个表视图、模型与图这三者的关系我没有看明 ...
UML模型的组成 -
guji528:
谢谢分享!
Enterprise Architect 基础应用 -
studentsky:
好文章,图文并茂!
WCF 第一个用 Visual Studio 2010 创建的WCF服务 -
chen975311486:
用哪个工具画的????
UML中对关系的描述 (二) -
frankies:
继续学习中。。
UML 交互概述图
下面以前台jQuery,后天C# 的方式,演示了,如何通过Ajax异步方式,传递参数,利用Get或者Post的方法发送,并返回所需的结果,例子注释完整,内容清晰丰富,请看下面代码演示并配合注释,篇幅有点多。
效果:
l6.aspx文件
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="l6.aspx.cs" Inherits="jQuery.Learning.l6" %>
<!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 id="Head1" runat="server">
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
.letters
{
float: left;
width: 260px;
}
.letter
{
margin: 10px;
}
.letter h3
{
font-weight: bold;
}
.button
{
width: 100px;
text-align: center;
padding: 10px;
background-color: #fff;
border-top: 3px solid #888;
border-left: 3px solid #888;
border-bottom: 3px solid #444;
border-right: 3px solid #444;
}
.letter ul
{
list-style: none;
padding: 0;
margin: 0 1em;
}
#dictionary
{
float: left;
width: 500px;
}
.entry
{
padding: 1em 0em;
border-bottom: 1px #555 solid;
}
.entry .term
{
display: inline;
font-weight: bold;
}
.entry .part
{
padding: 0 1em;
display: inline;
font-style: italic;
}
.entry .definition
{
padding: .5em;
}
.entry .definition .quote
{
margin: .5em 2em;
padding: 0 1em;
color: #333;
border-left: 2px #aaa solid;
}
.entry .definition .quote .quote-author
{
font-weight: bold;
margin-left: 20em;
}
#loading
{
border: 1px #000 solid;
background-color: #eee;
padding: 20px;
margin: 100px 0 0 200px;
position: absolute;
display: none;
}
.highlighted
{
background-color: #dfd;
font-style: italic;
}
</style>
<script type="text/javascript">
// 从服务器异步加载htm到页面中的方法
$(document).ready(function() {
$('#letter-a .button').click(function() {
//当单击时候首先隐藏目录div,然后加载htm,之后使用回调函数,以改变透明度的形式显示目录div
$('#dictionary').hide().load('l6a.htm', function() { //成功回调函数,意思是说,成功了之后会出发的函数,下面应用的都是成功回调
$(this).fadeIn();
});
});
});
//加载json(javascript对象表示法)
$(document).ready(function() {
$('#letter-b .button').click(function() {
//当点击按钮时候,使用全局函数$.getJSON获得指定文件的脚本对象数组结构,第一个参数是存储对象结构的文件名称,
//是异步回调方法,其中的data参数是异步加载返回的对象结构
$.getJSON('l6b.json', function(data) {
//彻底清空div内容
$('#dictionary').empty();
//$.each 函数和普通的each函数含义上相同,遍历,但第一个参数是数组,第二个参数是一个回调函数,每次获得一个新的数组元素的时候调用
//回调函数的参数分别代表,当前索引和当前项
$.each(data, function(entryIndex, entry) {
var html = '<div class="entry">';
html += '<h3 class="term">' + entry['term'] + '</h3>';
html += '<div class="part">' + entry['part'] + '</div>';
html += '<div class="definition">';
html += entry['definition'];
//如果当前项目存在quote键则执行
if (entry['quote']) {
html += '<div class="quote">';
//遍历quote数组
$.each(entry['quote'], function(lineIndex, line) {
html += '<div class="quote-line">' + line + '</div>';
});
//如果存在author键执行
if (entry['author']) {
html += '<div class="quote-author">' + entry['author'] + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
//向div中追加刚才拼接好的html内容
$('#dictionary').append(html);
});
});
});
});
//动态注入js,并执行他
$(document).ready(function() {
$('#letter-c .button').click(function() {
//全局加载,加载后会拥有全局环境中变量和函数的访问权,加载的js脚本会自动运行,注:加载的文件扩展名不重要,主要是内容
$.getScript('l6c.js');
});
});
//动态加载XML文件
$(document).ready(function() {
$('#letter-d .button').click(function() {
//get的功能是简单的通过url复制文本的内容,由于MIME,表示此扩展名为XML文件,所以会获得一个XML dom 树
$.get('l6d.xml', function(data) {
$('#dictionary').empty();
//找到所有的entry,遍历每一个entry元素
$(data).find('entry').each(function() {
//复制当前entry项
var $entry = $(this);
var html = '<div class="entry">';
html += '<h3 class="term">' + $entry.attr('term') + '</h3>'; //获得指定属性的所对应的值
html += '<div class="part">' + $entry.attr('part') + '</div>';
html += '<div class="definition">'
html += $entry.find('definition').text();
var $quote = $entry.find('quote');
if ($quote.length) {
html += '<div class="quote">';
//遍历每一个quote元素中的line
$quote.find('line').each(function() {
html += '<div class="quote-line">' + $(this).text() + '</div>'; //获得这个元素的文本
});
//如果存在author属性
if ($quote.attr('author')) {
html += '<div class="quote-author">' + $quote.attr('author') + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
$('#dictionary').append($(html));
});
});
});
});
//Ajax,加载服务器生成的html Get请求
$(document).ready(function() {
$('#letter-e #get').click(function() {
//获得当前页面的QueryString参数term 值为a标签的文本,第三个参数是回调函数,data是返回的值,
$.get('?', { 'term': $(this).text() }, function(data) {
//将返回值以html方式,加入到div中
$('#dictionary').html(data);
});
//防止打开新的链接,不需返回false
return false;
});
});
//Ajax,加载服务器生成的html Post请求,注释看get
$(document).ready(function() {
$('#letter-e #post').click(function() {
$.post('?', { 'term': $(this).text() }, function(data) {
$('#dictionary').html(data);
});
return false;
});
});
//Load加载简化了操作,效果与上面一样,Load会默认以Post请求方法提交
$(document).ready(function() {
$('#letter-e #load').click(function() {
$('#dictionary').load('?<
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="l6.aspx.cs" Inherits="jQuery.Learning.l6" %>
<!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 id="Head1" runat="server">
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
.letters
{
float: left;
width: 260px;
}
.letter
{
margin: 10px;
}
.letter h3
{
font-weight: bold;
}
.button
{
width: 100px;
text-align: center;
padding: 10px;
background-color: #fff;
border-top: 3px solid #888;
border-left: 3px solid #888;
border-bottom: 3px solid #444;
border-right: 3px solid #444;
}
.letter ul
{
list-style: none;
padding: 0;
margin: 0 1em;
}
#dictionary
{
float: left;
width: 500px;
}
.entry
{
padding: 1em 0em;
border-bottom: 1px #555 solid;
}
.entry .term
{
display: inline;
font-weight: bold;
}
.entry .part
{
padding: 0 1em;
display: inline;
font-style: italic;
}
.entry .definition
{
padding: .5em;
}
.entry .definition .quote
{
margin: .5em 2em;
padding: 0 1em;
color: #333;
border-left: 2px #aaa solid;
}
.entry .definition .quote .quote-author
{
font-weight: bold;
margin-left: 20em;
}
#loading
{
border: 1px #000 solid;
background-color: #eee;
padding: 20px;
margin: 100px 0 0 200px;
position: absolute;
display: none;
}
.highlighted
{
background-color: #dfd;
font-style: italic;
}
</style>
<script type="text/javascript">
// 从服务器异步加载htm到页面中的方法
$(document).ready(function() {
$('#letter-a .button').click(function() {
//当单击时候首先隐藏目录div,然后加载htm,之后使用回调函数,以改变透明度的形式显示目录div
$('#dictionary').hide().load('l6a.htm', function() { //成功回调函数,意思是说,成功了之后会出发的函数,下面应用的都是成功回调
$(this).fadeIn();
});
});
});
//加载json(javascript对象表示法)
$(document).ready(function() {
$('#letter-b .button').click(function() {
//当点击按钮时候,使用全局函数$.getJSON获得指定文件的脚本对象数组结构,第一个参数是存储对象结构的文件名称,
//是异步回调方法,其中的data参数是异步加载返回的对象结构
$.getJSON('l6b.json', function(data) {
//彻底清空div内容
$('#dictionary').empty();
//$.each 函数和普通的each函数含义上相同,遍历,但第一个参数是数组,第二个参数是一个回调函数,每次获得一个新的数组元素的时候调用
//回调函数的参数分别代表,当前索引和当前项
$.each(data, function(entryIndex, entry) {
var html = '<div class="entry">';
html += '<h3 class="term">' + entry['term'] + '</h3>';
html += '<div class="part">' + entry['part'] + '</div>';
html += '<div class="definition">';
html += entry['definition'];
//如果当前项目存在quote键则执行
if (entry['quote']) {
html += '<div class="quote">';
//遍历quote数组
$.each(entry['quote'], function(lineIndex, line) {
html += '<div class="quote-line">' + line + '</div>';
});
//如果存在author键执行
if (entry['author']) {
html += '<div class="quote-author">' + entry['author'] + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
//向div中追加刚才拼接好的html内容
$('#dictionary').append(html);
});
});
});
});
//动态注入js,并执行他
$(document).ready(function() {
$('#letter-c .button').click(function() {
//全局加载,加载后会拥有全局环境中变量和函数的访问权,加载的js脚本会自动运行,注:加载的文件扩展名不重要,主要是内容
$.getScript('l6c.js');
});
});
//动态加载XML文件
$(document).ready(function() {
$('#letter-d .button').click(function() {
//get的功能是简单的通过url复制文本的内容,由于MIME,表示此扩展名为XML文件,所以会获得一个XML dom 树
$.get('l6d.xml', function(data) {
$('#dictionary').empty();
//找到所有的entry,遍历每一个entry元素
$(data).find('entry').each(function() {
//复制当前entry项
var $entry = $(this);
var html = '<div class="entry">';
html += '<h3 class="term">' + $entry.attr('term') + '</h3>'; //获得指定属性的所对应的值
html += '<div class="part">' + $entry.attr('part') + '</div>';
html += '<div class="definition">'
html += $entry.find('definition').text();
var $quote = $entry.find('quote');
if ($quote.length) {
html += '<div class="quote">';
//遍历每一个quote元素中的line
$quote.find('line').each(function() {
html += '<div class="quote-line">' + $(this).text() + '</div>'; //获得这个元素的文本
});
//如果存在author属性
if ($quote.attr('author')) {
html += '<div class="quote-author">' + $quote.attr('author') + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
$('#dictionary').append($(html));
});
});
});
});
//Ajax,加载服务器生成的html Get请求
$(document).ready(function() {
$('#letter-e #get').click(function() {
//获得当前页面的QueryString参数term 值为a标签的文本,第三个参数是回调函数,data是返回的值,
$.get('?', { 'term': $(this).text() }, function(data) {
//将返回值以html方式,加入到div中
$('#dictionary').html(data);
});
//防止打开新的链接,不需返回false
return false;
});
});
//Ajax,加载服务器生成的html Post请求,注释看get
$(document).ready(function() {
$('#letter-e #post').click(function() {
$.post('?', { 'term': $(this).text() }, function(data) {
$('#dictionary').html(data);
});
return false;
});
});
//Load加载简化了操作,效果与上面一样,Load会默认以Post请求方法提交
$(document).ready(function() {
$('#letter-e #load').click(function() {
$('#dictionary').load('?<
发表评论
-
LINQ to SQL语句之Insert/Update/Delete操作
2009-12-30 14:54 1109Insert/Update/Delete操作 插入(Ins ... -
RabbitMQ 安装配置和简单实例
2010-01-21 16:52 1826安装ErLang运行环境 配置运行环境变量 启动服务 ... -
MSMQ(Microsoft Message Queue,微软消息队列) Asp.Net 简单示例
2010-01-22 14:59 3254系统: Windows XP 1.安装MSMQ 控制面板—&g ... -
IromPython .Net 的简介和第一个例子
2010-01-23 18:53 1343.Net 4 都已经到来 ... -
Microsoft Asp.Net MVC 从入门到精通
2010-01-27 17:53 836ASP.NET MVC Framework是微软官方提供的MV ... -
C# Socket 同步通信与异步通信 示例
2010-01-30 17:50 4735同步 1.建立链接发送和获取信息 异步 1.服务器端建立一 ... -
解决 Visual Stuido 工具栏中的工具重置后,恢复回来。
2009-12-18 17:06 1246拿DevExpress 控件为例,如果重置工具栏后,以前的工具 ... -
LINQ to SQL 用O/R设计器手工建表对象
2009-10-11 22:04 1017除了自己建立定制对象外,还可以使用O/R设计器以可视化的方式创 ... -
LINQ to XML .Net 3.5 中的新XML对象
2009-10-15 14:11 886System.Xml.Linq 命名空间中,有一系列新的LIN ... -
LINQ to XML 用 LINQ 查询 XML
2009-10-15 15:57 671将一个已知的XML放到XDocument 对象当中使用LINQ ... -
LINQ to XML 操作XML文档
2009-10-15 17:18 974使用 XDocument 对象的 Element 方法,获取制 ... -
C# 编码规范
2009-10-15 19:20 724陈年的文档,不过很不错整理出来发到博客上,还有更多的朋友需要。 ... -
Visual Studio 项目模板、文件模板、代码段和环境设置
2009-10-15 19:31 938很久前使用过,那个时候还没有开始写博客,好久不用就都忘记了,这 ... -
ADO.NET Entity Framework 概述
2009-10-16 11:50 565ADO.NET Entity Framework 与 LINQ ... -
LinqPad 1.31 下载
2009-01-14 15:42 967LinqPad 1.31 也许你已经非常熟悉他了,为即将使用L ... -
jQuery 的第一个例子
2009-01-18 10:34 791通过这个例子可以对jQuery的使用有个基本的认识,jQ ... -
jQuery 选择器的使用
2009-01-18 10:39 832jQuery 能如此的流行,很重要的一点也许就是他有非常强大且 ... -
一次从GridView 获得多个指定行中多个指定控件的值
2009-01-20 07:33 869一次从GridView 获得多个指定行中多个指定控件的值,非常 ... -
Enterprise Library 4.1 一步一步从入门到精通(未完成)
2009-02-05 23:04 888Enterprise Library 4.1 一步一步从入门到 ... -
Asp.Net & Oracle 编程一步一步从入门到精通(图解)随笔系列 --- 目录
2009-02-23 19:11 1052Asp.Net & Oracle 编程一步一步从入门 ...
相关推荐
jQuery-Ajax实例应用 介绍jquery-ajax中几种主要方法的应用
这是一个学习jquery-ajax的实例,实例中应用到了bean -json的转化, 页面上应用到了jqury如何解析返回的json数据。
其中包含6款Ajax分页Demo,文字分页、图片分页都可以。具有一定特效、很炫。基本已经满足各种web分页开发了。
jQuery Ajax 实例 全解析; jQuery Ajax 实例 全解析;
jquery ajax实例点击按钮触发Ajax loading jquery ajax实例点击按钮触发Ajax loading jquery ajax实例点击按钮触发Ajax loading
Vs2005C#下使用Jquery实现的Ajax简单实例
本文实例总结了jQuery AJAX应用。分享给大家供大家参考,具体如下: AJAX 是指一种创建交互式网页应用的网页开发技术。 AJAX=异步JavaScript和XML(标准通用标记语言的子集)。 AJAX是一种用于创建快速动态网页的...
spring整个流程配置测试正常,前台JSP页面使用jQuery中的Ajax提交至后台的简单实例项目。导入到myeclipse中,部署在tomcat后直接运行即可。
在VS环境下使用。C#代码。这是我总结的js和JQUERY使用ajax调用webservice和ashx(一般处理程序)的代码。还有使用AjaxPro第三方控件的使用的练习。
JQueryAjax在asp.net中的应用实例
php 用jquery ajax登陆,这是一个最简单的jquery ajax登陆实例,看了这个相信聪明的你能写出更好的东东!
一个完整的jquery+ajax传送请求的实例
jqueryAjax_无刷新调用另一页实例 要放在asp,jsp ,php 运行环境里
ajax jquery demo 实例 很多很好很强大
特别实用的Jquery Ajax 实例,希望能帮助到你
jquery ajax java实例非常实用,非常简单,对学习jquery很有帮助
关于在c# .net 框架下详细讲述了几种采用jQuery ajax的数据传输方法并配有案例,有文档教程以及可运行的源码
jquery ajax方法实现实例