StartKit.Ajax

来源：互联网发布：网络打假赚钱编辑：程序博客网时间：2024/06/05 21:15
//ajax应用 
//天哪，php我看不懂。算了。找个asp.net的例子吧。 
/*
    用jQuery生成一个DIV容器，ID是"rating".
    代码生成了5个链接，并将它们追加到id为"rating"容器中，当其中一个链接被点击时，
    该链接标明的分数就会以rating参数形式发送到rate.php，然后，
    结果将以XML形式会从服务器端传回来，添加到容器中，替代这些链接。
*/
$(document).ready(function() {
    // generate markup 
    var ratingMarkup = ["Please rate: "];
    for(var i=1; i <= 5; i++) {
        ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
    }
    // add markup to container and applier click handlers to anchors 
    $("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
        e.preventDefault();
        // send requests 
        $.post("rate.php", {rating: $(this).html()}, function(xml) {
            // format result 
            var result = [
                "Thanks for rating, current average: ",
                $("average", xml).text(),
                ", number of votes: ",
                $("count", xml).text()
            ];
            // output result 
            $("#rating").html(result.join(''));
        } );
    });
});
/*
一个在使用AJAX载入内容时经常发生的问题是：当载入一个事件句柄到一个HTML文档时，
还需要在载入内容上应用这些事件，你不得不在内容加载完成后应用这些事件句柄，
为了防止代码重复执行，你可能用到
*/
// lets use the shortcut 
$(function() {
    var addClickHandlers = function() {
        $("a.clickMeToLoadContent").click(function() {
            $("#target").load(this.href, addClickHandlers);
        });
    };
    addClickHandlers();
});
/*
现在，addClickHandlers只在DOM载入完成后执行一次，这是在用户每次点击具有clickMeToLoadContent 这个样式的链接并且内容加载完成后.
请注意addClickHandlers函数是作为一个局部变量定义的，而不是全局变量(如：function addClickHandlers() {...})，
这样做是为了防止与其他的全局变量或者函数相冲突.
另一个常见的问题是关于回调(callback)的参数。你可以通过一个额外的参数指定回调的方法，简单的办法是将这个回调方法包含在一个其它的function中:
*/
$(function(){
    // get some data 
    var foobar = ...;
    // specify handler, it needs data as a paramter 
    var handler = function(data) {
      ...
    };
    // add click handler and pass foobar! 
    $('a').click( function(event) { handler(foobar); } );
    // if you need the context of the original handler, use apply: 
    $('a').click( function(event) { handler.apply(this, [foobar]); } );
});