& Value not appearing with AJAX call

Question

Hey,

I am working on submitting values into a database through AJAX. It currently uses JQuery Ajax object.My Ajax code basically looks like this:

enter code here

var genre = form.new_album_genre.value; form.new_album_genre.value="";

$.ajax({
    type: "POST",
    data: "genre="+genre+"&app="+app,
    url: 'apps/PVElectronicPressKitAdmin/ajax_add_album_genre.php',
    success: function(data) {
    $('#'+divID).html(data);

} });

In short, it gets a value from a form and then submits the data through a post. Where it fails if the genre is something like R&B. The & symbol is not sumbitting and only the R is. So how do I submit values through AJAX including &, + and = ?

Answer 1

You need to encodeURIComponent to deal with characters which have special meaning in URIs.

(Or pass an object containing key/value pairs to jQuery instead of the query string String you have now)

Answer 2

Use

$.ajax({
    type: "POST",
    data: "genre="+encodeURIComponent(genre)+"&app="+encodeURIComponent(app),
    url: 'apps/PVElectronicPressKitAdmin/ajax_add_album_genre.php',
    success: function(data) {
    $('#'+divID).html(data);

Because of the & it is interpreted as a new parameter.
In your case data will look like genre=R&B&app=somethig -> this means 3 parameters: genre, B and app.

Answer 3

I've never had a problem with special chars using

$.post('apps/PVElectronicPressKitAdmin/ajax_add_album_genre.php', {
    'genre' : genre,
    'app' : app
},
function(data) {
    $('#'+divID).html(data);
});

Answer 4

Piggybacking off David Dorward's answer

 $.ajax({
            type: 'POST',
            url: 'apps/PVElectronicPressKitAdmin/ajax_add_album_genre.php',
            data: { genre : form.new_album_genre.value, app: form.app.value },
            success: function (data, textStatus) {
                $('#'+divID).html(data);

            }
        });