javascript - jQuery $.ajax() executed twice?

Question

Here is a button:

<input type="button" value="add to cart" id="addToCart" />

and a bound event:

$("#addToCart").bind('click',function(){
                $.ajax({
                    url: '/cartManager/add',
                    data:{
                        pictureId: currentImageId,
                        printSize: $("#size option:selected").val(),
                        paperType: $("#paperType option:selected").val(),
                        quantity: 1
                    },
                    success: function(){
                        $("#modal").html("<h1>ОК</h1><p>Closing in a sec</p>").delay(1000);
                        $("#modal").overlay().close();

                    }
                });
            return false;
            });

And everything works find apart one thing that kind of bothers, I see two requests in Chrome dev console for this:

1. add /cartManager:

Request URL:http://127.0.0.1:8000/cartManager/add?pictureId=4&printSize=2&paperType=1&quantity=1
Request Method:GET
Status Code:301 MOVED PERMANENTLY

1. add /cartManager/add?:

Request URL:http://127.0.0.1:8000/cartManager/add/?pictureId=4&printSize=2&paperType=1&quantity=1
Request Method:GET
Status Code:201 CREATED

Request headers for both are pretty much the same, the only difference in request headers:

first is cartManager/add?pictureId= and so on and the second one is cartManager/add/?pictureId - the '/' after /add

Is there something wrong with my javascript?

Answer 1

There's nothing wrong per-se, but you should add the trailing slash to /cartManager/add yourself.

What's happening is that the web server is sending a 301 redirect to the AJAX client with a new URL, so it issues a new request to the proper URL (i.e. with the trailing slash).