下面以前台jQuery,后天C# 的方式,演示了,如何通过Ajax异步方式,传递参数,利用Get或者Post的方法发送,并返回所需的结果,例子注释完整,内容清晰丰富,请看下面代码演示并配合注释,篇幅有点多。

效果:

l6.aspx文件

 

Code
<%@ 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('?', { 'term': $(this).text() });
                
return false;
            });
        });


        
//表单 提交操作的Ajax处理
        //1.串行化为QueryString的方法接收
        //        $(document).ready(function() {
        //            $('#letter-f form').submit(function() {
        //                $.get('?', $(this).find('input').serialize(), function(data) {
        //                    $('#dictionary').html(data);
        //                });
        //                return false;
        //            });
        //        });

        
//2.Form方式接收,同上面的From相似
        $(document).ready(function() {
            $(
'#letter-f form').submit(function() {
                $(
'#dictionary').load('?', { 'info': $('input[name="info"]').val() });
                
return false;
            });
        });



        
//Ajax 为用户提供反馈,利用ajaxStart和ajaxStop 方法,演示ajax跟踪相关事件的回调,他们两个方法可以添加给jQuery对象在Ajax前后回调
        //但对与Ajax的监控,本身是全局性的
        $(document).ready(function() {
            $(
'#loading').ajaxStart(function() {
                $(
this).show();
            }).ajaxStop(
function() {
                $(
this).hide();
            });
        });





        
//为Ajax全局,包括后加载dictionary 的中的h3 绑定事件
        $(document).ready(function() {
            $(
'body').click(function(event) { //如果单击的是h3就切换,为body添加这个单击事件可以保证后加载部分的h3标签同样可以用,
                //如果为h3添加,就仅能对初始化时候的h3有效,这种对body添加的方法,使用了事件冒泡原理
                if ($(event.target).is('h3')) {
                    $(event.target).toggleClass(
'highlighted');
                }
            });
        });


        
//如果直接为h3添加单击事件,动态的为新加载部分添加单击事件,而且需要限定绑定事件的作用域,否则会重复添加
        // $(document).ready(function() {
        //   var bindBehaviors = function(scope) {
        //     $('h3', scope).click(function() {
        //       $(this).toggleClass('highlighted');
        //     });
        //   }
        //  为这个方法传入当前This用来限定当前的范围
        //   bindBehaviors(this);
        //
        //   $('#letter-a .button').click(function() {
        //     $('#dictionary').hide().load('l6a.htm', function() {
        //       bindBehaviors(this);
        //       $(this).fadeIn();
        //     });
        //   });
        // });


        
//        结尾:
        //        在浏览器使用Ajax,总是会遇到跨域访问权限的问题,解决的方法有这么几种思路,可以参考
        //        1.用服务器来预处理这些数据,并存储在服务器上供客户端调用
        //        2.将远程服务器脚本加载到本地,脚本要提供接口和指定操作,明确的像你的文档提供数据才行,这样通过这个脚本中提供的XMLHTTPRequest,
        //            可以获得指定服务器的数据,Google Map API 就是使用了这个道理,看下面
        //        $(document.createElement('script')).attr("src", 'http://www.finehappy.com/example.js').appendTo('head'); 
        //        3. <iframe>标签解决,思路和2条一样
         
        
        
        
    
</script>

</head>
<body>
    
<div id="container">
        
<div id="header">
            
<h2>
                新年祝福
</h2>
            
<div class="author">
                冯瑞涛
</div>
        
</div>
        
<div class="letters">
            
<div class="letter" id="letter-a">
                
<h3>
                    异步加载 html
</h3>
                
<div class="button">
                    祝福
</div>
            
</div>
            
<div class="letter" id="letter-b">
                
<h3>
                    异步加载 json
</h3>
                
<div class="button">
                    祝福
</div>
            
</div>
            
<div class="letter" id="letter-c">
                
<h3>
                    异步注入 js
</h3>
                
<div class="button">
                    祝福
</div>
            
</div>
            
<div class="letter" id="letter-d">
                
<h3>
                    异步加载XML
</h3>
                
<div class="button">
                    祝福
</div>
            
</div>
            
<div class="letter" id="letter-e">
                
<h3>
                    jQuery Ajax for .Net
                
</h3>
                
<ul>
                    
<li>Ajax加载<id="get" href="">get</a>html文本</li>
                    
<li>Ajax加载<id="post" href="">post</a>html文本</li>
                    
<li>Ajax加载<id="load" href="">load</a>html文本</li>
                
</ul>
            
</div>
            
<div class="letter" id="letter-f">
                
<h3>
                    表单提交异步
</h3>
                
<form id="form1" runat="server">
                
<input type="text" name="info" value="" id="info" />
                
<input type="submit" name="submit" value="发送" id="submit" />
                
</form>
            
</div>
        
</div>
        
<div id="loading">
            服务器处理中,请稍后。
        
</div>
        
<div id="dictionary">
        
</div>
    
</div>
</body>
</html>

 

l6.aspx.cs 文件

 

Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace jQuery.Learning
{
    
public partial class l6 : System.Web.UI.Page
    {
        
protected void Page_Load(object sender, EventArgs e)
        {
            
//获取Get穿过来的参数
            if (Request.QueryString["term"== "get")
            {  
                
string strReturn = "<div class='entry'>GET 请求异步Ajax调用html元素返回的值</div>";
                Response.Write(strReturn);
                Response.End();
            }

            
//获取post传递过来的参数 
            if (Request.Form["term"== "post")
            {
                
string strReturn = "<div class='entry'>Post 请求异步Ajax调用html元素返回的值</div>";
                Response.Write(strReturn);
                Response.End();
            }

            
//获取post传递过来的参数 Load加载
            if (Request.Form["term"== "load")
            {
                
string strReturn = "<div class='entry'>Post 请求异步Ajax调用html元素返回的值 Load方法加载</div>";
                Response.Write(strReturn);
                Response.End();
            }

            
//获取post传递过来的参数 Load加载
            if (Request.Form["info"!= null || Request.QueryString["info"!= null)
            {
                
string strReturn = "<div class='entry'>你输入的是" + Request.Form["info"+ Request.QueryString["info"+ "</div>";
                Response.Write(strReturn);
                Response.End();
            }

        }
    }
}

 

下面是几个辅助文件,放在同目录下

l6a.htm

 

Code
<div class="entry">
    
<h3 class="term">
        动态加载html
</h3>
    
<div class="part">
        贺词
</div>
    
<div class="definition">
        
<p>祝你一帆风顺,二龙腾飞,三羊开泰,四季平安,五福临门,六六大顺,七星高照,八方来财,九九同心,十全十美。</p> 
        
<p>新的1年开始,祝好事接2连3,心情4季如春,生活5颜6色,7彩缤纷,偶尔8点小财,烦恼抛到9霄云外!请接受我10心10意的祝福。祝新春快乐!</p>
        
<p>春天的钟声响,新年的脚步迈,祝新年的钟声,敲响你心中快乐的音符,幸运与平安,如春天的脚步紧紧相随!春华秋实,我永远与你同在!</p>
    
</div>
</div>

 

l6b.json

 

Code
//数组中包着数组,数组中再有几个键值对
//
结构[{"a":'1',"b":["1","2"]},{}]不能出错
[
  {
    
"term""动态加载json",
    
"part""祝你",
    
"definition""在新的一年里",
    
"quote": [
      
"身体健康",
      
"事事如意",
      
"恭喜发财",
      
"牛年大吉"
    ],
    
"作者""Jorace"
  },
  {
    
"term""佳月",
    
"part""祝你",
    
"definition""新年快乐"
  }
]

 

l6c.js

 

Code
//数组中包着数组,数组中再有几个键值对
//
结构[{"a":'1',"b":["1","2"]},{}]不能出错
var entries = [
  {
    
"term""动态注入js",
    
"part""祝你",
    
"definition""在新的一年里",
    
"quote": [
      
"身体健康",
      
"事事如意",
      
"恭喜发财",
      
"牛年大吉"
    ],
    
"作者""Jorace"
  },
  {
    
"term""佳月",
    
"part""祝你",
    
"definition""新年快乐"
  }
]
var html = '';

$.each(entries, 
function() {
  html 
+= '<div class="entry">';
  html 
+= '<h3 class="term">' + this['term'+ '</h3>';
  html 
+= '<div class="part">' + this['part'+ '</div>';
  html 
+= '<div class="definition">' + this['definition'+ '</div>';
  
  html 
+= '</div>';
});

$(
'#dictionary').html(html);

 

l6d.xml

 

Code
<?xml version="1.0" encoding="utf-8" ?>
<entries>
    
<entry term="异步加载XML" part="祝福">
        
<definition>
            新的一年里
        
</definition>
        
<quote author="冯瑞涛">
            
<line>身体健康</line>
            
<line>万事如意</line>
        
</quote>
    
</entry>
    
<entry term="佳月" part="祝福">
        
<definition>
            佳月的祝福
        
</definition>
    
</entry>

</entries>
posted on 2009-01-28 21:48  冯瑞涛  阅读(3683)  评论(9编辑  收藏  举报