3

そこで、初期化フェーズで AJAX 呼び出しを行ってプロパティを設定するオブジェクトを作成しました。ただし、私は非常に奇妙な動作に遭遇しています: $.ajax() スコープ内でプロパティ値を印刷して表示することはできますが、プロパティの値を返すパブリックメソッドには「未定義」の戻り値があります。

JS コードは次のようになります。

function MyFunction() {
   this.myProperty;
   this.init();
}

Myfunction.prototype.getPropertyValue = function () {
    alert(this.myProperty); // returns 'undefined'
}

Myfunction.prototype.init = function () { 
   $.ajax({
      type: 'get',
      url: "getProperty.php",
      dataType: "json",
      success: function(response) {
         this.myProperty = response[0].Property;
         alert(this.myProperty) // returns 'Property Name'
      }
   });
}

私の考えでは、 $.ajax() スコープ内では、「これ」は実際には別のものを参照しています。それで、私の質問は、「this.myProperty」が設定されており、AJAX スコープの外に出たときにその値を失わないようにするにはどうすればよいですか?

どんな助けでも大歓迎です。

4

3 に答える 3

4

値を確立する方法が原因で「未定義」になる理由の一部:

var MyFunction = function () {
   this.myProperty;
   alert(this.myProperty); // undefined!
   this.init();
};

値を指定せずにプロパティ (または変数) を宣言すると、デフォルトで「未定義」になります。その代わり：

var MyFunction = function () {
   this.myProperty = false;
   alert(this.myProperty); // false
   this.init();
};

ajax 呼び出しに進みます。コールバックのスコープがオブジェクトと同じではないことは正しいです。thisは、ajax 成功関数で、jQuery でラップされた XHR オブジェクトを参照します。を呼び出すとthis.myProperty = response[0].Property、実際には ajax オブジェクトに新しいプロパティが作成され、その値が設定されます。これを修正するcontextには、jQuery ajax オブジェクトのオプションを使用するか、javascriptbindメソッドを使用してコールバック関数をバインドします。

  success: function(response) {
     this.myProperty = response[0].Property;
  }.bind(this)

... また：

   $.ajax({
      type: 'get',
      url: "getProperty.php",
      dataType: "json",
      context: this,
      success: function(response) {
         this.myProperty = response[0].Property;
      }
   });

ここで試してみてください: http://jsfiddle.net/SnLmu/

ドキュメンテーション

于 2012-08-15T19:05:32.390 に答える
0

問題の一部は、ajax が非同期であるため、プロパティにアクセスしようとしたときにプロパティが設定されない可能性があることです (競合状態)。もう 1 つはthis、ajax 呼び出しの内部の値 is notMyfunctionです。次の方法で修正できます。

Myfunction.prototype.init = function () { 
   var that = this;
   $.ajax({
      type: 'get',
      url: "getProperty.php",
      dataType: "json",
      success: function(response) {
         that.myProperty = response[0].Property;
         alert(that.myProperty) // returns 'Property Name'
      }
   });
}

contextまたは、ajax 呼び出しで設定を使用できます。サイトごと：

このオブジェクトは、すべての Ajax 関連のコールバックのコンテキストになります。デフォルトでは、コンテキストは呼び出しで使用される ajax 設定を表すオブジェクトです ($.ajaxSettings は $.ajax に渡される設定とマージされます)。たとえば、コンテキストとして DOM 要素を指定すると、次のように、リクエストの完全なコールバックのコンテキストになります。

Myfunction.prototype.init = function () { 
       var that = this;
       $.ajax({
          type: 'get',
          url: "getProperty.php",
          dataType: "json",
          context: Myfunction,
          success: function(response) {
             this.myProperty = response[0].Property;
             alert(this.myProperty) // returns 'Property Name'
          }
       });
    }
于 2012-08-15T18:58:38.167 に答える
0 
var MyFunction = {
    myProperty: null,
    init: function() {
        var self = this;
        self.ajax(function(response) {
            self.myProperty = response;
            self.secondfunction(self.myProperty); //call next step only when ajax is complete
        });
    },
    ajax: function(callback) {
        $.ajax({
            type: 'get',
            url: "getProperty.php",
            dataType: "json"
        }).done(function(response) {
            callback(response[0].Property);
        });
    },
    secondfunction: function(prop) {
        alert(prop);
    }
}

$(function() {    
    MyFunction.init();
});
于 2012-08-15T19:04:41.090 に答える