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

@Delphian i made changes as suggested by Darin but i am getting console error "Uncaught ReferenceError: response is not defined " — SamuraiJack, Jul 15 '13 at 14:25
what is the use of "msg" in function "CallWM", and you are not passing the value while calling — Able Alias, Jul 15 '13 at 14:29
I was passing a value earlier, forgot to remove it. But i am getting this error even after removing msg from CallWM — SamuraiJack, Jul 15 '13 at 14:32
@George Stocker - why is this marked as a duplicate, at least in relation to the linked answer? While it doesn't say so outright, isn't this Web Forms (I say this due to .aspx and the reliance on WebMethods)? Or is it duplicate because the answer is specific to the JavaScript? — Robert, Dec 28 '16 at 17:56

Darin Dimitrov · Answer 1 · 2013-07-15T13:56:23.610

4

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.

edited Jul 15 '13 at 13:56

answered Jul 15 '13 at 13:50

Darin Dimitrov

1,023,142
271
3,287
2,928

Just for further edification, see [What is the difference between JSON and Object Literal Notation?](http://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation) – Karl Anderson Jul 15 '13 at 13:56
Darin is correct, there is no `failure` callback for the `jQuery.ajax()` method. – Karl Anderson Jul 15 '13 at 13:58
SOrry for responding late, i made the changes but i am getting the console error "ncaught ReferenceError: CallWM is not defined" – SamuraiJack Jul 15 '13 at 14:19
Where is this javascript code written? Is it in a separate javascript file? Did you reference this file in your WebForm? Also you must reference it before the button. Also since you are using jQuery don't forget to reference that as well before your custom javascript code. – Darin Dimitrov Jul 15 '13 at 14:29
It is in the same file within the head tags. – SamuraiJack Jul 15 '13 at 14:36
Have you by some chance wrapped this `CallWM` function in a `$(document).ready` event? – Darin Dimitrov Jul 15 '13 at 14:39
no i havent, should i? – SamuraiJack Jul 15 '13 at 15:02
No, you shouldn't. Could you please show your full code of the WebForm? It looks like your page method is defined on the `Default.aspx` and not on `Register.aspx`. – Darin Dimitrov Jul 15 '13 at 15:05

score 2 · Accepted Answer · answered Jul 15 '13 at 14:46

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

Same error Uncaught ReferenceError: response is not defined I guess we are looking for problem at he wrong place. I know it must be something silly, i am trying to figure out whats causing this error. — SamuraiJack, Jul 15 '13 at 14:49

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

2 Answers2

Linked