Question

我试图在jQuery中找出AJAX，并试图在页面上提取一个元素的内容并将其注入另一个元素。这是我一直在玩的测试场景：

第1页：

...
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <button>Load it!</button>
    <div class="content"></div>
...

第二页：

...
<div class="container">
    <h1>Hello World!</h1>
    <div class="text">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui nulla impedit a nostrum eos voluptas, quidem cum, consequatur suscipit voluptate officia sapiente laboriosam similique dignissimos praesentium obcaecati, nemo commodi, laborum!</p>
    </div>  
</div>
...

第一页的

脚本文件：

$(function(){
    $('button').on('click', function(){
        $.ajax({
            url: "ajax/index.html"
        }).done(function(response){
            $('.content').html($(response).find('.container').html());
        });
    });
});

像this one和this one这样的堆栈交换上的几个帖子表明，这是我应该使用AJAX从另一个页面抓取1个元素的HTML的方向。但是，在第一页上运行代码时，不会返回.container中的内容，并将这些jQuery方法传递给console.log()，因此（console.log($(response).find('.container').html());）会返回undefined控制台。这有什么不对？

另外，是的，我意识到使用.load()是一个选项，但我真的想学习如何使用jAX的AJAX方法，因为我相信它为程序员提供了更多的查找控制。

Answer 1

更改如何获取响应元素容器。

自：

$('.content').html($(response).find('.container').html());

要：

$('.content').html($($.parseHTML(response)).filter(".container").html());

使用$.parseHTML()会将您的回复string转换为DOM个节点，以便您可以在其中找到这些元素。

在过滤AJAX响应时，jQuery返回undefined

1 个答案: