Ajax call not accepting Names with apostrophe as a parameter

Question

$(".loadingPnl").removeClass('hdn');

var siteurlA = window.location.protocol + "//" + window.location.host + _spPageContextInfo.siteServerRelativeUrl;
var callUrl = siteurlA + "/_layouts/15/SynchronyFinancial.Intranet/CreateMySite.aspx/SaveAvailableFavoriteItem";

var linkName = $('.txtLinkName').val();
linkName = linkName.replace("'","\'");

$.ajax({
    type: "POST",
    url: callUrl,
    data: "{'linkName': '" + linkName + "', 'webSiteUrl':'" +  $('.txtWebAddress').val() + "','iconId':'" + $(".ddlIcons").val() + "'}",
    contentType: "application/json; charset=utf-8",
    processData: false,
    dataType: "json",
    success: function (response) {
        return true;
    },
    error: function (response) {
        return true;
    }
});

return true;

}

Answer 1

The problem is you're building JSON yourself as the request parameters. Moreover, you're building invalid JSON (JSON property names are always with double quotes (")).

Instead, pass an object and let jQuery take care of how to send it - if you pass that instead of a string the server can figure it out. If you really want to do it yourself you can also pass an object to JSON.stringify.

var payload = {
    linkName: linkName,
    webSiteUrl: $('.txtWebAddress').val(),
    iconId: $(".ddlIcons").val()
};



 $.ajax({
    type: "POST",
    url: callUrl,
    data: JSON.stringify(payload), // or just payload
    contentType: "application/json; charset=utf-8",
    processData: false, // if you just pass payload, remove this
    dataType: "json" 
    // you had two `return`s here, but they wouldn't work, make sure
    // you understand why
    // http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call
});

Answer 2

You can send a JSON instead. Or use JSON.stringify if you want String.

{
    'linkName' : linkName,
    'webSiteUrl' : $('.txtWebAddress').val(),
    'iconId' :  $(".ddlIcons").val()
}

Answer 3

Don't create JSON string by yourself AND don't use JSON.stringify().

Problem with creating JSON string yourself is to escape string properly for JavaScript (which could be tricky). see Special Characters

Problem with JSON.stringify is that I found it somehow slower than XMLHttpRequest which is strange because I thought it is using JSON.stringify behind curtains.

XMLHttpRequest is handling this for you. If you just pass your object as a data and XMLHttRequest will do the trick.

$.ajax({
   type: "POST",
   url: callUrl,
   data: {'linkName': linkName, 
          'webSiteUrl': $('.txtWebAddress').val(),
          'iconId': $(".ddlIcons").val()
         },
   contentType: "application/json; charset=utf-8",
   processData: false,
   dataType: "json",
   success: function (response) {
       return true;
   },
   error: function (response) {
       return true;
   }
});