URL Encode a string in jQuery for an AJAX request

javascript jquery ajax http
Brian D picture Brian D · Jul 1, 2011 · Viewed 427.1k times · Source

I'm implementing Google's Instant Search in my application. I'd like to fire off HTTP requests as the user types in the text input. The only problem I'm having is that when the user gets to a space in between first and last names, the space is not encoded as a +, thus breaking the search. How can I either replace the space with a +, or just safely URL Encode the string?

$("#search").keypress(function(){       
    var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val();
    var options = {};
    $("#results").html(ajax_load).load(query);
});

Answer

Anders Fjeldstad picture Anders Fjeldstad · Jul 1, 2011

Try encodeURIComponent.

Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).

Example:

var encoded = encodeURIComponent(str);

Related questions

How to make a jsonp POST request that specifies contentType with jQuery?

I need to make a jsonp POST request with the content type 'application/json'. I can get the POST request to the server like this: jQuery.ajax({ type: 'POST', url: url, data: data, success: success, error: error, async: true, complete: …

Read More
Why do browsers inefficiently make 2 requests here?

I noticed something odd regarding ajax and image loading. Suppose you have an image on the page, and ajax requests the same image - one would guess that ajax requests would hit the browser cache, or it should at least …

Read More
jQuery AJAX submit form

I have a form with name orderproductForm and an undefined number of inputs. I want to do some kind of jQuery.get or ajax or anything like that that would call a page through Ajax, and send along all the …

Read More