Question

我正在尝试使用AJAX / JQUERY加载链接的href中的URL内容。

出于某种原因，AJAX没有被执行，当我点击链接时，URL将在新窗口中打开！

但是我需要在没有打开新窗口的情况下在具有AJAX的同一页面上加载URL的内容！

这是我目前的代码：

<div id="content"></div>

<a id='listc'  class='lisitem' href='file.php?id=".$id."' >".$id."</a>

和AJAX：

<script type="text/javascript">
$("#listc").click(function() {        
    $("#content").load(this.href);

    return false;
});
</script>

只是为了澄清，我的页面标题中包含了jquery lib，我在同一页面上将其用于其他内容。所以问题不是那个。

有人可以就这个问题提出建议吗？

由于

Answer 1

您需要阻止链接的默认操作：

<script type="text/javascript">
$("#listc").click(function(e) {
    e.preventDefault();   
    $("#content").load(this.href);

    return false;
});
</script>

Answer 2

您需要对AJAX返回做一些事情：

<script type="text/javascript">
$("#listc").click(function() {        
    $("#content").load(this.href, function(result){
        alert("AJAX done");
    });

    return false;
});
</script>

Answer 3

尝试以下内容：

document.getElementById('listc').addEventListener('click', function() {
   $("#content").load(this.href);
   return false;
});

<强> 更新

变化：

<a id='listc'  class='lisitem' href='file.php?id=".$id."' >".$id."</a>

为：

<a id="listc" class="listitem" data-id="<?= $id; ?>" href="#"> <?= $id; ?></a>

和AJAX：

$(document).delegate('.listitme','click',(function() {
  var id = $(this).data('id');
  $('#content').load('file.php?id=' + id);
  return false;
}

或：

$(document).delegate('.listitme','click',(function() {
      var id = $(this).data('id');
      $.post('file.php', {id : id}, function(answer) {
          $('#content').html(answer);
      });
    }

Answer 4

您可以将href从实际页面更改为javascript:来电。这样，您就不必担心默认链接重定向。

<a id='listc'  class='lisitem' href=javascript:LoadFunction('file.php?id=".$id."'); >".$id."</a>

JS：

function LoadFunction(url) {
    $("#content").load(url, function(result){
        //something
    });
}

Answer 5

尝试类似的事情：
单击链接时，执行AJAX调用，然后在容器中打印结果。

<script type="text/javascript">
    $("#listc").click(function(e) {
        e.preventDefault();
        $.ajax({
           url: $(e.currentTarge).attr('href'),
           complete: function () {
              // remove loading status if neeed
           },
           success: function (response) {
               $("#content").html(response)
           },
           error: function() {
              //manage error here
           }

        });
    });    
</script>

AJAX使用链接而不是按钮加载内容？

5 个答案: