Url Encode a string in jQuery for an AJAX request

Encoding peculiarities: Special Characters

There are characters that need a little extra care when encoding, characters like !, ', (, ), and *. encodeURIComponent usually leaves these characters alone. However, to ensure strict compliance with RFC 3986, a fixedEncodeURIComponent function can be used.

function fixedEncodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16).toUpperCase();
  });
}


Pro Tip: Use this function when encodeURIComponent isn't enough.

Dealing with Multiple Parameters

When dealing with multiple parameters, jQuery.param() is utilitarian. This function transforms the parameters into a serialized string.

var parameters = { name: "John", city: "Boston" };
var serializedParams = jQuery.param(parameters);


Post Requests: More than a Letter

When it comes to AJAX, use the POST method to send parameters through the data option rather than tagging them along in the URL. This keeps URLs uncluttered and lets jQuery handle encoding.

$.ajax({
  type: "POST",
  url: "endpoint",
  data: serializedParams,
  // ...
});


The Dr. Jekyll and Mr. Hyde of User Inputs

Since user-entered data can sometimes behave like Mr. Hyde, save yourself the horror by using URL encoding. This not only ensures your requests won't look like they are haunting your server, but it also may be useful in stopping users from entering potentially harmful data.

var userInput = $('#userInput').val();
var encodedInput = encodeURIComponent(userInput);
// Now the data can travel safely!


Don't forget the Backend

Remember, all backends are not created equal! For instance, working with ASP.NET MVC3 with Entity Framework might entail specific encoding requirements. What is accepted in one backend might be rejected in another, so it's important to thoroughly test AJAX requests and URL encoding.

Verifying your Encoding

Before you let your AJAX functionality loose in the world, verify it is working as expected by testing that your application can correctly handle special characters and spaces. Bugs are much easier to squash in testing than in production.

Event-Driven AJAX

For more interactive interfaces, AJAX requests can be triggered by jQuery event-handling features, such as keypress events. Your users will thank you for their seamless browsing experience.

$('#searchInput').on('keypress', function() {
  // Your AJAX call can be triggered here
});


Bonus: Understanding encodeURIComponent

What is it? It’s a wizard in JavaScript that poofs certain characters into one, two, three, or even four escape sequences, ensuring safe passage of your data through the treacherous lands of the internet.

How it operates? Our JavaScript wizard works by targeting all characters except these usual suspects: A-Z a-z 0-9 - _ . ! ~ * ' ( ).

Common pitfall: Not encoding can lead unspeakable horrors such as XSS attacks and technical hitches where special characters can cause the server to receive garbled information.

Tips, Tricks and Some Life Advice

• Encode at the last moment: Only encode right before sending an AJAX call to avoid encoding characters twice mistakenly.
• Decode upon receiving: On the server side, ensure you decode the parameters to retrieve the original data.
• Stay updated: Keep yourself updated about the changes to encoding standards and best practices.