Question

我试图通过AJAX将id中的所有内容都放入id“ajax_container”中。 AJAX响应包含所有页面HTML，但是当我使用选择器来隔离div的内容时，它返回undefined。

 $(".ajax-click").click(function(e){
     $.ajax({
         url: $(this).attr("href"),
         success: function(response) {
           alert(response);
           var html = $('#ajax_container', response).html();
           alert(html);
         }
     });
 e.preventDefault();
 });

尝试选择HTML：

<html>
<body>
    <div id="ajax_container">
        <p>Content here</p>
    </div>
</body>
</html>

Answer 1

如果您只是想获得一个页面的片段，我建议您使用.load https://api.jquery.com/load/

$( "#target" ).load( "ajax/test.html #ajax_container" );

在上面的代码段中，您正在加载名为test.html的页面，但只是检索ID为#ajax_container的元素。

所以你的代码片段看起来像是：

$(".ajax-click").click(function(e){
     // get the element clicked
     var $clickedElement = $(this),
          pageToLoad = $clickedElement.prop("href");


     $( "#ajax_container" ).load( "ajax/test.html " + pageToLoad );

     e.preventDefault();
 });

您似乎正在尝试实施客户端路由。如果您尝试使用ajax内容替换容器，那么您应该使用可帮助您实现此目的的库。要使用的实体库是Path.js.下面是一个小例子的链接，它类似于你想要实现的目标。

http://www.javascriptoo.com/path-js

Answer 2

您需要.load()来执行此操作

$("#TargetID").load("ajax/test.html #ajax_container");
                 //^^URL            ^^ element you want to load

$('#ajax_container', response).html();

等于

$('#ajax_container').find(response).html();

没有标识为ajax_container的元素，因此返回undefined

Answer 3

使用当前函数，您应该使用.html()来将html字符串设置为元素。

例如

 $(".ajax-click").click(function(e){
     $.ajax({
         url: $(this).attr("href"),
         success: function(response) {
           $('#ajax_container').load(response);
           alert("Success");
         }
     });
 e.preventDefault();
 });

请参阅https://api.jquery.com/html/

然而，正如其他人所说.load()也有效。（https://api.jquery.com/html/）

 $(".ajax-click").click(function(e){
     $('#ajax_container').load($(this).attr("href"), function() {
         alert("Load successful.");
     });
 e.preventDefault();
 });

我建议使用.load()而不是.html()，因为前者更清晰。

通过AJAX获取页面HTML的一部分

3 个答案: