In this article I will explain with an example, how to solve the problem when Single Quotes appear in the parameter values when using jQuery AJAX i.e. how to escape Single Quotes when using jQuery AJAX.
The solution to this problem is to serialize the JSON string using JSON2 Stringify method and then pass as parameter to the WebMethod.
HTML Markup
The HTML Markup consists of a sample form with TextBoxes for accepting Name and Age and a Button to post the values to server’s WebMethod using jQuery AJAX.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Name:
</td>
<td>
<asp:TextBox ID="txtName" runat="server" Text = "Mudassar" />
</td>
</tr>
<tr>
<td>
Age:
</td>
<td>
<asp:TextBox ID="txtAge" runat="server" Text = "29"/>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnSubmit" Text="Submit" runat="server" />
</td>
</tr>
</table>
WebMethod accepting multiple parameters
In order to illustrate the functioning, an ASP.Net WebMethod is used to handle jQuery AJAX calls. The same concept can be used for other technologies too.
C#
[System.Web.Services.WebMethod]
public static string SendParameters(string name, int age)
{
return string.Format("Name: {0}{2}Age: {1}", name, age, Environment.NewLine);
}
VB.Net
<System.Web.Services.WebMethod()> _
Public Shared Function SendParameters(name As String, age As Integer) As String
Return String.Format("Name: {0}{2}Password: {1}", name, age, Environment.NewLine)
End Function
Handling Single Quotes with jQuery AJAX
When the Button is clicked, the Name and Age is fetched from their respective TextBoxes and are assigned to a JSON object in which I have created two properties with the name same as that of the WebMethod parameters.
Note: JavaScript is case sensitive and hence make sure the spelling and the case of the parameter name and the property name are same otherwise the WebMethod will not get called.
The JSON object is now serialized to a JSON string using JSON2 Stringify method and then passed as parameter to the WebMethod.
In this technique there are no syntax errors and also there’s no need to convert values of TextBoxes to integer or some other Data Type.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20130526/json2.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnSubmit]").click(function () {
var obj = {};
obj.name = $.trim($("[id*=txtName]").val());
obj.age = $.trim($("[id*=txtAge]").val());
$.ajax({
type: "POST",
url: "CS.aspx/SendParameters",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r.d);
}
});
return false;
});
});
</script>
![jQuery AJAX Single Quote Problem: Escape Single Quotes in jQuery AJAX.]()
Demo
Downloads
Download Code
