Question

我想在页面链接中实现以下行为。

点击链接后，我想：

首先，将一些数据发送（POST）回服务器
其次，允许浏览器导航到链接指向的URL。

我对JQuery比较陌生，这是我下面的第一次尝试。我将非常感谢这里的任何jQuery专家填补空白（并且可能指出下面的代码段如何得到改进）。

<html>
<head>test page</head>
<body>
<div><a id="hotlink" href="http://www.example.com">Clik and see</a></div>
<script type="text/javascript">
$(document).ready(function(){
  $('hotlink').click(function(){
     //AJAX Post data here ...
     //follow the link url (i.e. navigate/browse to the link) ...
  });
});
</script>
</body>
</html>

Answer 1

您可能想要查看我的answer to a similar question。基本上，ajax帖子默认是异步的，在完成之前可能不会进入服务器。为了确保完成，您可以使其同步，但这将锁定浏览器，直到请求返回。如果您的服务器遇到问题，这可能会非常有问题，可能需要一段时间，用户正在等待关注链接。不过，代码是：

$('#hotlink').click( function () { 
    $.ajax({ 
      async: false,
      type: "POST", 
      url: "http://myurl.com/mypage.php", 
      data: "param1=value&param2=value",  // &param3=value... etc. 
    }); 
});

完成后，将遵循链接的默认操作。

Answer 2

您可以在ajax回调中设置window.location调用。

以下是一些未经测试的快速代码：

<script type="text/javascript>
$(document).ready(function(){
  $('hotlink').click(function(){
     var link = $(this);
     $.post(url, {'data': 'value'}, function() {
       window.location = link.attr('href');
     });
     return false;
  });
});
</script>

请注意，您应该做一些事情以明确页面正在执行ajax调用，例如放入微调器图形，并禁用链接以便它们不会多次单击它。

<强> - 编辑 -

解决此问题的另一种方法是执行同步ajax调用，但浏览器将在其正在进行时锁定。

要回答评论，您需要返回false，以便在成功完成ajax调用之后才会遵循该链接。

Answer 3

试试这个：

$('#hotlink').click(function() {
    $.post(...);
    return true;
});

从.click(function(){...})返回true的过程将指示浏览器关注该链接。如果您return false，则浏览器不会关注该链接。

另外，请务必使用#hotlink代替hotlink（或类似的选择器）。

显然，您需要使用jquery文档中的正确用法填写$.post(...)。这里的文档：http://api.jquery.com/jQuery.post/

Answer 4

查看ajax method的文档。其他方法（如post）只是ajax的快捷方式。

$(document).ready(function(){
  $('#hotlink').click(function(){
     //AJAX Post data here ...
     $.ajax({
         async: false,
         data: 'can be a string or object, read docs',
         url: 'http://example.com/whatever.html',
         type: 'post'
     });

     //follow the link url (i.e. navigate/browse to the link) ...
     //(it happens naturally by clicking a link, no need for extra code)
  });
});

请注意，我指定此调用应同步进行。这样，您可以确保服务器在浏览器导航到新页面之前接收数据。

Answer 5

几乎完美;）

<script type="text/javascript">
$(document).ready(function(){
  $('#hotlink').click(function(event){
     //AJAX Post data here
  });
});
</script>

您忘记了查找链接元素的#符号。只要您不拨打event.preventDefault()，就会自动跟踪该链接。

如果您不想发送AJAX请求，我建议您发送同步请求，否则您将无法确定它是否成功。

（JQuery）如何在关注链接之前调用自定义函数

5 个答案: