Get QueryStrings in browser url in jquery get request

Question

I would like to send a get request with jquery but the get function does not put the query strings in the address bar.I tried setting async to false but it still does not work.

$("#searchForm").submit(function (event) {
            var x = $("#category").serialize();
            $.get("Home/test", x, function (data) {               
                alert(data);
            });
            event.preventDefault();
            });

The code above does not put the query strings in the address bar like a normal get request would.

hence i should have in the browser address bar something like Home/Text/?category=laptop

for example

any other solutions to specify what querystrings i can put in the address bar are welcome.

form id="searchForm" action="@Url.Action("Index")" method="get">    

    <input type="text" name="search" id="search />
    <div id="price">
        <input type="text" id="PriceMin" name="PriceMin" />
        <input type="text" id="PriceMax" name="PriceMax" />
    </div>
    <input type="submit" value="submit"/>
</form>

as an example i dont want in the url querystrings of

?search=volvo&PriceMin=&PriceMax=

In other words, the input fields that are null should not be placed in url on a get request.

thx.

Found something and its working why i didnt think of this before is beyond me

$("#searchForm").submit(function (event) {
            if ($("#PriceMin").val() == "") { $("#PriceMin").prop("disabled", true); alert("isnull");}
            });  

i disable the input field if it is "" just before the form is sent.Thus the query string of "priceMin" is not sent because the element is disabled.

Epperson

Answer 1

The reason why the address bar doesn't change is because when you make an AJAX request with javascript, this request is made in the background. The whole point of AJAX is to make requests without navigating away form the current page. If you change the url in the address bar that would trigger the entire page to be reloaded. So what you are trying to achieve is impossible. You could use the fragment portion of the url (the part that follows the #). You could modify this part of the url without causing the browser to navigate away. Take a look at the following article: http://ajax.rswebanalytics.com/seo-for-ajax/#!ajax-crawlable-urls

Thus you could have the following url:

http://example.com/Home/Text/#category=laptop

In order to manipulate the fragment portion of the url in javascript you could use the window.location.hash property. Bear in mind though that this part of the url is never sent to the server. It is only intended to be used on the client.

As far as your second question about the empty strings is concerned, there's no way to achieve that in pure HTML. You will have to write javascript. Basically here you will have to subscribe to the .submit event of the form and manually build the target url that you will redirect to and exclude parameters that have empty values. Then manually redirect to this url using the window.location.href property. Also don't forget to cancel the default action of the submit by returning false.

Unbeknown