如何单击将执行但不重定向的 link。

Question

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

我正在使用 preventDefault 和 stopPropgation，但它不起作用。警报出现了，但是 link 本身没有执行，当我稍后查看我的购物车时，产品不存在。有帮助吗？

<?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

尝试：

'<a href="#" id="shop">Add Cart NoRedirect</a>'

或

'<a href="javascript: return false;" id="shop">Add Cart NoRedirect</a>'

Answer 2

您可以使用图像、按钮、div 或修饰为 link 的文本来代替 link。

Answer 3

你的 HTML 主播 link:

<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 发布到的页面必须在同一个子域上，或者必须在服务器上正确启用跨源资源共享，否则请求将由于跨域限制而失败。

Answer 4

'<a href="javascript: void(0);" id="shop">Add Cart NoRedirect</a>'

如何单击将执行但不重定向的 link。

How to click a link that will execute but not redirect.

javascript

jquery

preventdefault