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

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);
        }

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

Method 2

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);
            }
        });
    }

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0