Sending string to wcf service using jquery ajax. why can i only send strings of numbers?

Posted by Robodude on Stack Overflow See other posts from Stack Overflow or by Robodude
Published on 2011-03-11T20:05:01Z Indexed on 2011/03/14 16:10 UTC
Read the original article Hit count: 210

Hi Guys,

For some reason, I'm only able to pass strings containing numbers to my web service when using jquery ajax. This hasn't been an issue so far because I was always just passing IDs to my wcf service. But I'm trying to do something more complex now but I can't figure it out.

In my interface:

    [OperationContract]
    [WebInvoke(ResponseFormat = WebMessageFormat.Json)]
    DataTableOutput GetDataTableOutput(string json);

My webservice:

public DataTableOutput GetDataTableOutput(string json)
{
    DataTableOutput x = new DataTableOutput();

    x.iTotalDisplayRecords = 9;
    x.iTotalRecords = 50;
    x.sColumns = "1";
    x.sEcho = "1";
    x.aaData = null;



    return x;
}

Javascript/Jquery:

var x = "1";
                    $.ajax({
                        type: "POST",
                        async: false,
                        url: "Services/Service1.svc/GetDataTableOutput",
                        contentType: "application/json; charset=utf-8",
                        data: x,
                        dataType: "json",
                        success: function (msg) {
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            //alert(XMLHttpRequest.status);
                            //alert(XMLHttpRequest.responseText);
                        }
                    });

The above code WORKS perfectly. But when I change x to "t" or even to "{'test':'test'}" I get a Error 400 Bad Request error in Firebug.

Thanks, John

EDIT: Making some progress! data: JSON.stringify("{'test':'test'}"), Sends the string to my function!

EDIT2:

var jsonAOData = JSON.stringify(aoData);
                    $.ajax({
                        type: "POST",
                        async: false,
                        url: sSource,
                        contentType: "application/json; charset=utf-8",
                        data: "{'Input':" + jsonAOData + "}",
                        dataType: "json",
                        success: function (msg) {
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            //alert(XMLHttpRequest.status);
                            //alert(XMLHttpRequest.responseText);
                        }
                    });

enter image description here

EDIT3: I modified the code block I put in EDIT2 up above.

Swapping the " and ' did the trick!

$.ajax({
                        type: "POST",
                        async: false,
                        url: sSource,
                        contentType: "application/json; charset=utf-8",
                        data: '{"Input":' + jsonAOData + '}',
                        dataType: "json",
                        success: function (msg) {
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            //alert(XMLHttpRequest.status);
                            //alert(XMLHttpRequest.responseText);
                        }
                    });

However, I have a new problem:

    public DataTableOutput GetDataTableOutput(DataTableInputOverview Input)
    {

The input here is completely null. The values I passed from jsonAOData didn't get assigned to the DataTableInputOverview Input variable. :(

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery