Question

Some context: I'm using Bigcommerce (which doesn't support PHP) to design a store-front and want to allow users to add a product inside of the checkout page without redirecting them to the cart page. I know this is possible because on the front page, there are some pre-programmed buttons which are simply <a href="http://somestore.com/cart.php?action=add&product_id=9001"> tags with some button-like styling. These pull up a modal, and most importantly add the product to the cart - both without redirect.

So at first this struck me as a simple problem - just $.ajax to the page and be done with it, but then I ran into the old Access-Control-Allow-Origin error, which is strange, since I'm writing my Javascript on the same domain that I'm trying to hit, only the sub-domain is different (/cart vs /checkout). I decided to look deeper at the request made by this magical button. The only Request Header which is not present on my own dysfunctional version of this request is X-Requested-With which I of course tried to add to my XMLHttpRequest unsuccessfully.

The second thing I noticed was an extra URL paramter which wasn't originally listed in the source, fastcart=1 so I tried adding that, and was taken to a PHP page I obviously wasn't meant to see. It's easily roughly 200 lines of spaghetti, and I'm not sure I can post it here. It's obvious that a script somewhere was taking this href and using it to make a GET request, but how? I've tried both XMLHttpRequest, and ajax, but both give me the Access-Control-Allow-Origin response.

I've seen the use of a technique where you disallow the redirect of the page on an <a href> by adding an .click(function(e) to it, and calling either return false or e.preventDefault(); but these simply don't allow my <a href> to accomplish anything at all, let alone some ninja GET request. My question is ultimately about why my own attempts at a GET request to this page have failed, when a simple <a href> has been able to bypass SOP and make the request almost in secret.

Obviously I'll have to spend some more time looking at the PHP script I was taken to by the extra parameter. Nevertheless, this has turned out to be a much bigger mystery than I had originally thought it would be, teaching me a lot along the way. Unfortunately, I haven't solved it yet, and I really need to get this functionality working. If it's helpful for me of the source on these requests, I'll be happy to, but for now I've run out of time and have to get some rest. If some one with more web development experience can help, I would be extremely grateful!

Answer 1

您不必使用<a>标记，您只需在要用于将项目添加到购物车的任何元素上添加事件侦听器。例如，这里是一个按钮的代码，它将id为＃9001的产品添加到购物车中。

<style>
    .button {
        display: table-cell;
        width: 200px;
        height: 75px;
        color: #fff;
        background: #000;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
    }
</style>

<div class="button">Click Me</div>

<script type="text/javascript">
    $('.button').click(function () {
        $.ajax({type: 'GET', url: '/cart.php?action=add&product_id=9001'});
    });
</script>

基本上，制作你想要的元素，根据需要设置样式，然后添加一个.click()监听器。

只需将商品ID替换为您要添加的商店中的商品编号。

如何制作<a href=""> make its GET request without redirecting?

1 个答案: