How to send and retrieve data from web method using JQuery Ajax Call?

Question

I have a text box and a button next to it. I want to send the content of textbox through Jquery ajax call to webmethod and get back the upper case value of the same and display that in alert. So far i have this code but its not working.

JAVASCRIPT:

function CallWM()
    {          

        var name = $('#name').val();         


        RealCallWM(name);


    }
    function RealCallWM(name) {

        $.ajax({
            url: 'Register.aspx/UpperWM',
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            data: { name: JSON.stringify(name) },
            success: OnSuccess(response),
            error: function (response) {
                alert(response.responseText);
            }
        })
    };

HTML:

  Name:    <input id="name" type="text" /> 
<input id="Button1" type="button" value="button" onclick="CallWM();"/></div>
    </form>

WEB METHOD:

 [WebMethod]
        public static string UpperWM(string name )
        {
            var msg=name.ToUpper();
            return (msg);
        }

Solution 1

As per your comment I understood your issue not yet resolved, so just try this

    function RealCallWM(name) {
        $.ajax({
            type: "POST",
            url: "Default.aspx/UpperWM",
            data: JSON.stringify({ name: $('#name').val() }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            success: function (data, status) {
                console.log("CallWM");
                alert(data.d);
            },               
            failure: function (data) {
                alert(data.d);
            },
            error: function (data) {
                alert(data.d);
            }
        });
    }

Solution 2

Replace:

data: '{name: ' + name + '}',

with:

data: { name: JSON.stringify(name) },

to ensure proper encoding. Right now you are sending the following payload:

{name:'some value'}

which is obviously an invalid JSON payload. In JSON everything should be double quoted:

{"name":"some value"}

That's the reason why you should absolutely never be building JSON manually with some string concatenations but using the built-in methods for that (JSON.stringify).

Side note: I am not sure that there's a callback called failure that the $.ajax method understands. So:

$.ajax({
    url: 'Register.aspx/UpperWM',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: { name: JSON.stringify(name) },
    success: OnSuccess(response),
    error: function (response) {                        
        alert(response.responseText);
    }
});

Also notice that in your error callback I have removed the response.d property as if there's an exception in your web method chances are that the server won't return any JSON at all.