javascript - 如何单击将执行但不重定向的链接。

Question

我的 mySQL 数据库中有一些产品，它们的链接正在我的脚本中使用 $producturl 进行检索。这些 url 实际上将产品添加到购物车 ( http://www.example.com/cart/?add-to-cart=1127 )。我正在尝试创建一个脚本，允许用户将产品添加到购物车，但不重定向它们，只需执行链接，以便用户停留在同一页面上。

我正在使用 PreventDefault 和 stopPropgation，但它不起作用。警报出现，但当我稍后查看我的购物车时，链接本身没有执行，产品不在那里。有什么帮助吗？

<?php $producturl = ProductURL::find(array('Product'=>$tube1->Tube1));
if($producturl[0]->URL!=NULL){  
echo '<span id="shop">Add Cart NoRedirect</span>';
}
?>

<script type="text/javascript">
$(document).on('click', '#shop', function (event) {
 $.post( '<?php echo $producturl[0]->URL; ?>' );
event.preventDefault();
event.stopPropagation();
alert('Product has been added to cart');
});
</script>

Answer 1

您的 HTML anchor 链接:

<a id='link1' href="http://www.google.com">Link</a>

所需的 jQuery JS(不要忘记将其放入 DOM 就绪函数中):

// Act on clicks to a elements
$("#link1").on('click', function(e) {
    // prevent the default action, in this case the following of a link
    e.preventDefault();
    // capture the href attribute of the a element
    var url = $(this).attr('href');
    // perform a get request using ajax to the captured href value
    $.get(url, function() {
        // success
    });
});

这演示了实现您的功能所需的所有原则。

相关页面和发布到的 URL 必须位于同一子域，或者必须在服务器上适当启用跨源资源共享，否则请求将因跨域限制而失败。