Pass Multiple Parameters to jQuery ajax call

Question

I have the following jquery code to call a webmethod in an aspx page

$.ajax({
    type: "POST",
    url: "popup.aspx/GetJewellerAssets",
    contentType: "application/json; charset=utf-8",
    data: '{"jewellerId":' + filter + '}',
    dataType: "json",
    success: AjaxSucceeded,
    error: AjaxFailed
});

and here is the web method signature

[WebMethod]
public static string GetJewellerAssets(int jewellerId)
{

This works fine.

But now I need to get two parameters passed to the web method

the new web method looks like this

[WebMethod]
public static string GetJewellerAssets(int jewellerId, string locale)
{
}

How do I change the client code to successfully call this new method signature ?

EDIT:

The following 2 syntaxes worked

data: '{ "jewellerId":' + filter + ', "locale":"en" }',

and

data: JSON.stringify({ jewellerId: filter, locale: locale }),

where filter and locale are local variables

data: JSON.stringify({ jewellerId: filter, locale: locale }) is the best way which I every found, Thank @ChrisCa — Frank Myat Thu
– Frank Myat Thu, Commented Mar 14, 2012 at 7:37
If you're a sad soul like me, you might have gotten stuck on this for hours. When using JSON.stringify with an object literal, you MUST include the parameter name with a colon, all wrapped inside {} braces. Using JSON.stringify(objectLiteral) doesn't work. — Kaleb Anderson
– Kaleb Anderson, Commented Nov 12, 2015 at 22:14
Method signature like [WebMethod] [ScriptMethod(UseHttpGet = true)] public static string TestIBAN(string ccc) ? — Kiquenet
– Kiquenet, Commented Mar 4, 2016 at 8:45

Darin Dimitrov · Accepted Answer · 2009-12-16 18:27:12Z

160

Don't use string concatenation to pass parameters, just use a data hash:

$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',
    contentType: 'application/json; charset=utf-8',
    data: { jewellerId: filter, locale: 'en-US' },
    dataType: 'json',
    success: AjaxSucceeded,
    error: AjaxFailed
});

UPDATE:

As suggested by @Alex in the comments section, an ASP.NET PageMethod expects parameters to be JSON encoded in the request, so JSON.stringify should be applied on the data hash:

$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ jewellerId: filter, locale: 'en-US' }),
    dataType: 'json',
    success: AjaxSucceeded,
    error: AjaxFailed
});

edited Dec 16, 2009 at 18:27

answered Dec 16, 2009 at 17:37

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Alex Bagnolini Over a year ago

Consider also using JSON.stringify( myObject ) to create a JSON string from a javascript object, in case you want to group your parameters to a class later on.

ChrisCa Over a year ago

thanks for the replies - however, I get a http status 500 when I try it like that. Any ideas? or even how to debug it? Breakpoint in the web method never gets hit

ChrisCa Over a year ago

new code as follows $.ajax({ type: 'POST', url: 'popup.aspx/GetJewellerAssets', contentType: 'application/json; charset=utf-8', data: {jewellerId:filter,locale:'en-US'}, dataType: "json", success: AjaxSucceeded, error: AjaxFailed });

Darin Dimitrov Over a year ago

To debug, first look at FireBug what's the exact response of the server, then put a break point in the web service method and see if it is reached.

ChrisCa Over a year ago

Breakpoint in the web method never gets hit Firebug shows: "Message":"Invalid JSON primitive: jewellerId.","StackTrace":" at System.Web.Script.Serialization So I guess the syntax of the json is incorrect

|

David Hedlund · Accepted Answer · 2009-12-16 17:37:01Z

18

data: '{"jewellerId":"' + filter + '","locale":"' + locale + '"}',

answered Dec 16, 2009 at 17:37

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

2 Comments

ChrisCa Over a year ago

this worked: '{ "jewellerId":' + filter + ', "locale":"en" }', (obviously I won't be hardcoding the locale to en, but this is the syntax that worked.

fiat Over a year ago

This worked for me with MVC 3. I couldn't get Darin's way to work - maybe its an MVC 3 thing.

pixeline · Accepted Answer · 2009-12-16 17:37:27Z

8

simply add as many properties as you need to the data object.

 $.ajax({
                    type: "POST",
                    url: "popup.aspx/GetJewellerAssets",
                    contentType: "application/json; charset=utf-8",
                    data: {jewellerId: filter , foo: "bar", other: "otherValue"},
                    dataType: "json",
                    success: AjaxSucceeded,
                    error: AjaxFailed
                });

answered Dec 16, 2009 at 17:37

pixeline

18.1k12 gold badges87 silver badges110 bronze badges

1 Comment

Adam Over a year ago

What would the webmethod signature look like in this case to read out the properties in data on the server side?

Sumit Jambhale · Accepted Answer · 2016-08-25 10:33:07Z

DO not use the below method to send the data using ajax call

data: '{"jewellerId":"' + filter + '","locale":"' + locale + '"}'

If by mistake user enter special character like single quote or double quote the ajax call fails due to wrong string.

Use below method to call the Web service without any issue

var parameter = {
       jewellerId: filter,
       locale : locale 
};


data: JSON.stringify(parameter)

In above parameter is the name of javascript object and stringify it when passing it to the data attribute of the ajax call.

ebram khalil · Accepted Answer · 2014-03-18 09:27:33Z

5

$.ajax({
    type: 'POST',
    url: 'popup.aspx/GetJewellerAssets',      
    data: "jewellerId=" + filter+ "&locale=" +  locale,  
    success: AjaxSucceeded,
    error: AjaxFailed
});

edited Mar 18, 2014 at 9:27

ebram khalil

8,3197 gold badges45 silver badges60 bronze badges

answered Sep 5, 2011 at 6:27

Justinonday

1474 silver badges15 bronze badges

2 Comments

Kiquenet Over a year ago

Working too using type: GET ?

Shekhar Patel Over a year ago

or you can use an array to pass data in jason.stringyfy(array).

Jasbir Rana · Accepted Answer · 2016-08-25 10:08:34Z

    var valueOfTextBox=$("#result").val();
    var valueOfSelectedCheckbox=$("#radio:checked").val();

    $.ajax({
    url: 'result.php',
    type: 'POST',
    data: { forValue: valueOfTextBox, check : valueOfSelectedCheckbox } ,
    beforeSend: function() {

          $("#loader").show();
       },
    success: function (response) {
       $("#loader").hide();
       $("#answer").text(response);
    },
    error: function () {
        //$("#loader").show();
        alert("error occured");
    }
    });

Ariel · Accepted Answer · 2009-12-16 22:20:52Z

3

Has anyone else noticed that the json string/object is invalid in all answers except for David Hedlund's? :)

JSON objects must be formatted in the following manner: {"key": ("value" | 0 | false)}. Also, writing it out as a string requires much less than stringifying the object...

answered Dec 16, 2009 at 22:20

Ariel

4,5102 gold badges24 silver badges23 bronze badges

Comments

Milind bilonia · Accepted Answer · 2015-09-03 09:45:05Z

1

Just to add on [This line perfectly work in Asp.net& find web-control Fields in jason Eg:<%Fieldname%>]

 data: "{LocationName:'" + document.getElementById('<%=txtLocationName.ClientID%>').value + "',AreaID:'" + document.getElementById('<%=DropDownArea.ClientID%>').value + "'}",

edited Sep 3, 2015 at 9:45

answered Sep 2, 2015 at 7:04

Milind bilonia

113 bronze badges

Comments

Carlos Landeras · Accepted Answer · 2013-06-05 06:40:36Z

0

Its all about data which you pass; has to properly formatted string. If you are passing empty data then data: {} will work. However with multiple parameters it has to be properly formatted e.g.

var dataParam = '{' + '"data1Variable": "' + data1Value+ '", "data2Variable": "' + data2Value+ '"' +  '}';

....

data : dataParam

...

Best way to understand is have error handler with proper message parameter, so as to know the detailed errors.

edited Jun 5, 2013 at 6:40

Carlos Landeras

11.1k11 gold badges60 silver badges84 bronze badges

answered Apr 12, 2013 at 15:24

Subodh Patil

821 silver badge9 bronze badges

Comments

Matt · Accepted Answer · 2013-09-02 11:24:49Z

0

I successfully passed multiple parameters using json

data: "{'RecomendeeName':'" + document.getElementById('txtSearch').value + "'," + "'tempdata':'" +"myvalue" + "'}",

edited Sep 2, 2013 at 11:24

Matt

75.4k26 gold badges156 silver badges181 bronze badges

answered Sep 2, 2013 at 9:17

user2739266

1

1 Comment

fcm Over a year ago

never pass user data to a parameter without 'cleaning' before.

Amit Dige · Accepted Answer · 2020-10-26 10:25:35Z

-1

            data: JSON.stringify({ "objectnameOFcontroller": data, "Sel": $(th).val() }),

controller object name

answered Oct 26, 2020 at 10:25

Amit Dige

1

Collectives™ on Stack Overflow

Pass Multiple Parameters to jQuery ajax call

11 Answers 11

6 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

6 Comments

2 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Linked

Related