简体   繁体   English

jQuery Ajax计时问题

[英]Trouble with jQuery Ajax timing

I have a very simple javascript class that does an ajax call to a web service of mine via jquery. 我有一个非常简单的javascript类,它通过jquery对我的Web服务进行了ajax调用。 It returns the data successfully, but I am unable to retrieve it via a variable I set the data to. 它成功返回了数据,但是我无法通过将数据设置为的变量来检索它。 I don't think it is a matter of the ajax call being asynchronous or not because I have set up event handlers for all the ajax events, but some of them do not fire. 我认为这与ajax调用是否异步无关,因为我已经为所有ajax事件设置了事件处理程序,但是其中一些不会触发。 I have no idea what is wrong. 我不知道怎么了。 Here is the complete code: 这是完整的代码:

Javascript: Javascript:

function testClass(){
    this.returnData = "";
    this.FireAjax = function(){
        $.getJSON("http://localhost/mywebapp/webservices/service.asmx/Initialize?userID=12&jsoncallback=?",
            function(data){
                this.returnData = data.d;
                alert(data.d);
            }
        );  
    }

}

HTML page: HTML页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://localhost/mywebapp/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="testClass.js"></script>

<script type="text/javascript">
    $(document).ready(function(){

        var obj = new testClass();

        $("#debug").ajaxError(function(event, request, settings){
            $(this).append("<b>Ajax Error!</b><br />"); //this does not fire
        });

        $("#debug").ajaxSend(function(evt, request, settings){
            $(this).append("<b>Ajax Send!</b><br />"); //this does not fire!?
        });

        $("#debug").ajaxStop(function(){
            $(this).append("<b>Ajax Stopped</b><br />"); //this fires
        });

        $("#debug").ajaxComplete(function(event,request, settings){
            $(this).append("<b>Ajax Completed!</b><br />"); //this fires
            $(this).append("<h2>" + obj.returnData + "</h2>"); //this returns an empty string!!!!!!
        });

        $("#debug").ajaxSuccess(function(evt, request, settings){
            $(this).append("<b>Ajax Successful!</b><br />"); //this fires
        });

        $("#debug").ajaxStart(function(){
            $(this).append("<b>Ajax Started!</b><br />"); //this fires
        });

        obj.FireAjax();
    });
</script>
</head>

<body>
<div id="debug">

</div>
</body>
</html>

Additional Info: If I remove the complete event in my html page and place the call to obj.returnData in my stop event (thinking that perhaps my html complete event overwrites my testClass complete function), i get the same results. 附加信息:如果我在html页面中删除了complete事件,并将对obj.returnData的调用放在我的stop事件中(认为我的html complete事件可能覆盖了我的testClass complete函数),我将得到相同的结果。

Your problem is here: 您的问题在这里:

this.returnData = data.d;

this inside the anonymous function refers to the jQuery Options object, not the instance of your object. 匿名函数内部的this指的是jQuery Options对象,而不是对象的实例。

Try this: 尝试这个:

function testClass(){
    this.returnData = "";
    var that = this;
    this.FireAjax = function(){
        $.getJSON("http://localhost/mywebapp/webservices/service.asmx/Initialize?userID=12&jsoncallback=?",
                function(data){
                        that.returnData = data.d;
                        alert(data.d);
                }
        );      
    }

}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM