Javascript - jquery ajax post error driving me mad

Question

Can't seem to figure this one out.

I have a web service defined as (c#,.net)

[WebMethod]
public string SubmitOrder(string sessionid, string lang,int invoiceno,string email,string emailcc)
{
   //do stuff.
   return stuff;
}

Which works fine, when I test it from the autogenerated test thingy in Vstudio.

But when I call it from jquery as

$j.ajax({
        type: "POST",
        url: "/wservice/baby.asmx/SubmitOrder",                     
        data: "{'sessionid' : '"+sessionid+"',"+
              "'lang': '"+usersettings.Currlang+"',"+
              "'invoiceno': '"+invoicenr+"',"+
              "'email':'"+$j(orderids.txtOIEMAIL).val()+"',"+
              "'emailcc':'"+$j(orderids.txtOICC).val()+"'}",
        contenttype: "application/json; charset=utf-8",         
        datatype: "json",
        success: function (msg) {
            submitordercallback(msg);
        },
        error: AjaxFailed
    });     

I get this fun error:

responseText: System.InvalidOperationException: Missing parameter: sessionid.    at  
System.Web.Services.Protocols.ValueCollectionParameterReader.Read(NameValueCollection collection)    at  
System.Web.Services.Protocols.HtmlFormParameterReader.Read(HttpRequest request)    at  
System.Web.Services.Protocols.HttpServerProtocol.ReadParameters()    at  
System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()  

data evaluates to: {'sessionid' : 'f61f8da737c046fea5633e7ec1f706dd','lang': 'SE','invoiceno': '11867','email':'[email protected]','emailcc':''}

Ok, fair enough, but this function from jquery communicates fine with another webservice.

Defined:

c#:

[WebMethod]
public string CheckoutClicked(string sessionid,string lang)
{
//*snip*

//jquery:

var divCheckoutClicked = function()
{
    $j.ajax({
        type: "POST",
        url: "/wservice/baby.asmx/CheckoutClicked",                     
        data: "{'sessionid': '"+sessionid+"','lang': '"+usersettings.Currlang+"'}",         
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            divCheckoutClickedCallback(msg);
        },
        error: AjaxFailed
    });     
}

Answer 1

data: {sessionid: sessionid,
       lang: usersettings.Currlang,
       invoiceno: invoicenr,
       email: $j(orderids.txtOIEMAIL).val(),
       emailcc: $j(orderids.txtOICC).val()
        },

Answer 2

remove the single quotes;

data: "{sessionid : "+sessionid+","+
              "lang: "+usersettings.Currlang+","+
              "invoiceno: "+invoicenr+","+
              "email:"+$j(orderids.txtOIEMAIL).val()+","+
              "emailcc:"+$j(orderids.txtOICC).val()+"}",
        contenttype: "application/json; charset=utf-8",     

and move the curly brace outside the quotes

Answer 3

data should be more like data: {sessionid : sessionid, lang: usersettin...

the way you're sending it now, it's a string.. so your application is NOT getting the variable sessionID and it's value.

Thus, it's reporting an error. this error is not json, so responseText is throwing an error.

Answer 4

Refer to http://encosia.com/2010/05/31/asmx-scriptservice-mistake-invalid-json-primitive/

Short version is, Be sure to set data as a string using this format

// RIGHT $.ajax({ type: 'POST', contentType: 'application/json', dataType: 'json', url: 'WebService.asmx/Hello', data: '{ FirstName: "Dave", LastName: "Ward" }' });

it has to be double quotes inside the string.

Answer 5

You can simplify the JSON creation and make it less brittle by using JSON.stringify to convert a client-side object to JSON string. JSON.stringify is built into newer browsers as a native feature, and can be added to older browsers by including Douglas Crockford's json2.js.

Take a look at this post on using JSON and data transfer objects with ASMX ScriptServices for some examples. Its examples start in almost exactly the same predicament that you're currently in, so hopefully it will be helpful.