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?

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?

• javascript
• jquery
• ajax

• I don't understand why it would bother you, the situation in Libya bothers me. This is expected behavior. – Anders Commented Apr 4, 2011 at 21:15
• what happens if you add the final / to the url? url: '/cartManager/add/' – fredrik Commented Apr 4, 2011 at 21:16

4 Answers 4

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

This is happening because of this: http://httpd.apache.org/docs/2.0/mod/mod_dir.html#directoryslash

Nohing to do with your javascript, this is pure Apache wizardry.

Of course, as pointed out in other answers, you should add a slash after "add" because "add" is obvisouly a folder, not a file.

Status Code:301 MOVED PERMANENTLY

No, your JavaScript is not causing this. It looks like your server is redirecting /cartManager/add to /cartManager/add/. Since the server wants a trailing slash, why not just add it and avoid the redirect?

The header has the clues you need.

Your request to '/cartManager/add' is being forwarded to '/cartManager/add/' (notice the ending forward slash).

Replace your ajax call with

$.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();

                    }
                });