使用 jquery get 提取一段 ajax 请求

Question

我正在努力让这个获取请求进行合作。我想首先说PHP方面完美无缺。我现在正在尝试使用 ajax 和 jQuery 让它看起来更流畅。

这里是js：

$(".controls a").click(function(e) {
    e.preventDefault();
    $.get($(this).attr("href"), function(data) {
        $(".schedule").fadeOut(200, function() {
            $(this).html(data).fadeIn(200);
        });
    });
});

$(this).attr("href") 指的是为了从 MySQL 数据库获取信息而传递的 URL（例如 hours.php?week=2014-08-11）。每次点击链接时，week 中传递的值都会通过 PHP 更新。

这是我从console.log(data) http://pastebin.com/bGpfjq6r 得到的信息

我尝试通过执行以下操作将data（原始 HTML）转换为 jQuery 对象：

 var $data = $.parseHTML(data);

但是，这只是将 HTML 转换为一个数组。我可以为元素执行find：

 console.log($($data).find(".schedule")); 

但是当我查看这个的输出时，context 是未定义的。

我也尝试了这个问题Extract part of HTML document in jQuery 接受的答案，但无济于事：

 var foo = $(".schedule", $data);
 console.log(foo);

这仍然有一个未定义的context。

理想情况下，我只想获取.section 中的信息，并将.section 中的当前信息替换为从GET 请求中获取的信息。 .section 是 document 的一部分，也是请求返回的内容。

控制台中没有错误。 jQuery 版本是 1.11.1。

如果问题写得不好，我深表歉意。我试着用一般的方式来写它，所以它也可能适用于其他人。如果您需要更多信息，请告诉我。

Answer 1

尝试使用 jQuery filter() 函数。

$(".controls a").click(function(e) {
    e.preventDefault();
    $.get($(this).attr("href"), function(data) {
        $(".schedule").fadeOut(200, function() {

            // apply filter function here to find new schedule div
            var newSchedule = $(data).filter(".schedule").eq(0).html();

            $(this).html(newSchedule).fadeIn(200);
        });
    });
});

Answer 2

尝试包装响应以便解析它...

$(document).ready(function() {

    // Create named function to Initialize the on click event capture
    function initAJAX() {
        $(".controls a").click(function(e) {
            e.preventDefault();
            $.get($(this).attr("href"), function(data) {
                var response = $('<div>' + data + '</div>');
                var contents = response.find('.schedule').html()
                $(".schedule").fadeOut(200, function() {
                    $(this).html(contents).fadeIn(200);
                    // After we get the content updated, we have to reinitialize those new anchors
                    initAJAX();
                });
            });
        });
    }
    // We have to call this once to start or nothing will happen
    initAJAX();
});