jQuery 的Ajax应用（1）--学习篇，内附实例

terryfeng

浏览: 506904 次
性别:
来自: 北京

最近访客更多访客>>

fengruitao

zjx128

slingling

星海孤舟

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

[随笔分类][01] .Net X

Ajax jQuery 应用服务器 HTML JavaScript

　　下面以前台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('?<

分享到：

使用jQuery for Asp.Net 我的开发环境配置 | jQuery 的DOM操作方法元素的创建、复制 ...

2009-01-28 21:48
浏览 1356
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论