Jquery Ajax Call, doesnt call Success or Error

Possible Duplicate:
How to return the response from an AJAX call from a function?

I am using Jquery Ajax to call a service to update a value.

function ChangePurpose(Vid, PurId) {
        var Success = false;
        $.ajax({
            type: "POST",
            url: "CHService.asmx/SavePurpose",
            dataType: "text",
            data: JSON.stringify({ Vid: Vid, PurpId: PurId }),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                Success = true;//doesnt goes here
            },
            error: function (textStatus, errorThrown) {
                Success = false;//doesnt goes here
            }

        });
        //done after here
        return Success;
    }

and Service :

[WebMethod]
        public string SavePurpose(int Vid, int PurpId)
        {
            try 
            {
                CHData.UpdatePurpose(Vid, PurpId);
                //List<IDName> abc = new List<IDName>();
                //abc.Add(new IDName { Name=1, value="Success" });
                return "Success";

            }
            catch (Exception ex)
            {
                throw new Exception(ex.Message);
            }
        }

the service is being called Successfully from the AJAX. Value is also being Changed. But after the Service, success: or error: functions are not being called , in this case success should have been called but it is not working.

I used firebug and found that, the success or error functions are being skipped and goes directly to return Success;

Can't seem to find whats the problem with the code.

Thanks in advance

Update: adding async: false fixed the problem

---

change your code to

function ChangePurpose(Vid, PurId) {
        var Success = false;
        $.ajax({
            type: "POST",
            url: "CHService.asmx/SavePurpose",
            dataType: "text",
            async:false,
            data: JSON.stringify({ Vid: Vid, PurpId: PurId }),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                Success = true;//doesnt goes here
            },
            error: function (textStatus, errorThrown) {
                Success = false;//doesnt goes here
            }

        });
        //done after here
        return Success;
    } 

You can only return the values from a synchronous function. Otherwise you will have to make a callback .

So I just added async:false, to your ajax call

Update:

jquery ajax calls are asynchronous by default. So success & error functions will be called when the ajax load is complete. But your return statement will be executed just after the ajax call is started.

A better aproach will be

     // callbackfn is the pointer to any function that needs to be called
     function ChangePurpose(Vid, PurId, callbackfn) {
        var Success = false;
        $.ajax({
            type: "POST",
            url: "CHService.asmx/SavePurpose",
            dataType: "text",
            data: JSON.stringify({ Vid: Vid, PurpId: PurId }),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                callbackfn(data)
            },
            error: function (textStatus, errorThrown) {
                callbackfn("Error getting the data")
            }

        });
     } 


     function Callback(data)
     {
        alert(data);
     }

and call the ajax as

 // Callback is the callback-function that needs to be called when asynchronous call is complete
 ChangePurpose(Vid, PurId, Callback);

---

Try to encapsulate the ajax call into a function and set the async option to false. Note that this option is deprecated since jQuery 1.8.

function foo() {
    var myajax = $.ajax({
        type: "POST",
        url: "CHService.asmx/SavePurpose",
        dataType: "text",
        data: JSON.stringify({ Vid: Vid, PurpId: PurId }),
        contentType: "application/json; charset=utf-8",
        async: false, //add this
    });
    return myajax.responseText;
}

You can do this also:

$.ajax({
    type: "POST",
    url: "CHService.asmx/SavePurpose",
    dataType: "text",
    data: JSON.stringify({ Vid: Vid, PurpId: PurId }),
    contentType: "application/json; charset=utf-8",
    async: false, //add this
}).done(function ( data ) {
        Success = true;
}).fail(function ( data ) {
       Success = false;
});

You can read more about the jqXHR jQuery Object

链接地址: http://www.djcxy.com/p/9492.html

上一篇: AJAX请求成功时如何返回值

下一篇: JQuery的Ajax调用，没有调用成功或错误