CODEWITHSUNDEEP
javascriptphpajaxgetxmlhttprequest
Csteele5
Csteele5

Reputation: 1292

How can I make <a href> make its GET request without redirecting?

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!

Upvotes: 0

Views: 1987

Answers (1)

Flintsteel7
Flintsteel7

Reputation: 23

You don't have to use an <a> tag, all you have to do is add an event listener on whatever element you want to use to add the item to the cart. For example, here's code for a button that will add product with id# 9001 to the cart.

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

Basically, make the element you want, style it how you want, then add a .click() listener.

Just replace the product id with the number of the product on your store you want to add.

Upvotes: 1

Related Questions