加载页面片段时，jQuery加载（URL）不起作用？

Question

我有此页面，第一个按钮运行良好。

我想按第二个按钮给我href中的链接时，我曾这样尝试过，但是我得到了整个页面，而不仅仅是链接的值，为什么呢？

<html>
<head>
  <script src="jquery.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){

      var url = "http://localhost/test/asdfasdf.php";

      $("#button").on("click", function() {
        $('body').load( url  );
       });

      $("#button2").on('click',function(){
        $('body').load( url +"#link" );
      });
    });
</script>
</head>
<body>
  <input type="button" id="button" value="load" />
  <input type="button" id="button2" value="search for a tag" />
</body>
</html>

Answer 1

我想您想要一个空间：

$('body').load(url + " #link");

http://api.jquery.com/load/#loading-page-fragments

您似乎想要的只是该URL上a#link元素的href 。 因此，无需将其加载到<body> ，只需发出AJAX请求，并查看结果即可：

$.ajax({
    type: "GET",
    url: "http://localhost/test/asdfasdf.php",
    dataType: "html"
}).done(function (data) {
    var the_link = $(data).find("#link");
    alert(the_link.attr("href"));
});

要将href放入<body> ，请在.done()方法中添加以下行：

$("body").html(the_link.attr("href"));
// or
$("body").append(the_link.attr("href"));

但是，如果您实际上想将a#link元素加载到<body> ，请执行以前的操作，然后查找a#link元素并获取其属性：

$('body').load(url + " #link", function () {
    var the_link = $("#link");
    alert(the_link.attr("href"));
});

Answer 2

编辑

您试图在另一个页面上捕获<a>的href。 尝试一下：

$.get(url+' #link', function(data) {
    var $link = $(data).find('a').attr('href');
    alert($link);
});

这是我最好的猜测，但这是黑暗中的一枪。

Answer 3

当前，您的代码评估为.load('http://localhost/test/asdfasdf.php#link') ，其中#link是一个无用的片段。 您需要一个空间来引起jQuery的自动DOM解析和元素加载的特殊行为。

$("body").load(url + " #link");

编辑：获取实际的链接值：

$.get(url).done(function (html) {
    console.log($(html).find('#link').attr('href'));
});

您还可以在.done回调内部附加到body 。

加载页面片段时，jQuery加载（URL）不起作用？

问题描述

3 个解决方案

解决方案1
4 2013-03-29 20:24:58

解决方案2
3 2013-03-29 20:25:06

解决方案3
1 已采纳 2013-03-29 20:25:44

加载页面片段时，jQuery加载（URL）不起作用？

问题描述

3 个解决方案

解决方案1 4 2013-03-29 20:24:58

解决方案2 3 2013-03-29 20:25:06

解决方案3 1 已采纳 2013-03-29 20:25:44

解决方案1
4 2013-03-29 20:24:58

解决方案2
3 2013-03-29 20:25:06

解决方案3
1 已采纳 2013-03-29 20:25:44