jQuery Giá trị trả lại không được xác định

Question

CỐ ĐỊNH! CẢM ƠN! Xem "Mã đã sửa" bên dưới.

Mục tiêu là lấy lại dữ liệu từ hộp thoại. Tôi đã thấy rất nhiều bài viết, nhưng không thể nhận được bất kỳ bài viết nào để làm việc, vì vậy tôi quyết định sử dụng dịch vụ web để chuyển dữ liệu qua lại giữa hộp thoại và trang cơ bản.

Tất cả mã được đưa ra ngoại trừ mã đọc giá trị quay lại từ dịch vụ web. Tôi có thể thấy trong trình gỡ rối rằng dữ liệu đang được truyền lại, nhưng khi tôi quay trở lại người gọi, dữ liệu trả về là không xác định.

Hàm jQuery getLocal gọi AJAX, lấy lại dữ liệu tốt, nhưng khi nó trả về hàm gọi nó (verbListShow), giá trị trả về là "không xác định".

Đây là tất cả xảy ra trong một trang ASP.NET được viết chủ yếu trong jQuery và mở một hộp thoại jQuery.

function getLocal(name) { 
    $.ajax({ 
     type: "POST", 
     async: false, 
     url: "WebServices/FLSAService.asmx/GetLocalVariable", 
     dataType: 'json', 
     contentType: 'application/json; charset=utf-8', 
     data: JSON.stringify({ name: name }), 
     success: function (data) { 
      var rtn = data.d; 
      return rtn; 
     } 
    }); 
} 

Mã trên hoạt động, nhưng khi được gọi, rtn chưa được xác định. Dưới đây là những người gọi:

function verbListShow(dutyNumber) { 

    $('#dlgDutyList').dialog({ 
     modal: true, 
     show: "slide", 
     width: 250, 
     height: 250, 
     open: function (event, ui) { 
      setLocal("DUTYNUMBER", dutyNumber); 
     }, 
     buttons: { 
      "Select": function() { 
       var id = getLocal("VERBID"); // <*** Returns undefined 
       var verb = getLocal("VERB"); // <*** Returns undefined 
       $.ajax({ 
        type: "POST", 
        async: false, 
        url: "WebServices/FLSAService.asmx/SetDuty", 
        dataType: 'json', 
        contentType: 'application/json; charset=utf-8', 
        data: JSON.stringify({ dutyNum: dutyNumber, id: id, verb: verb }), 
        success: function (data) { 
         data = $.parseJSON(data.d); 
         if (data.ErrorFound) { 
          showMessage(data.ErrorMessage, 2, true); 
         } 
         else { 
          log('Set Duty: ' + data.StringReturn + ' (' + data.intReturn + ')'); 
         } 
        }, 
        error: function (XMLHttpRequest, textStatus, errorThrown) { 
         alert("updateDuty: " 
          + XMLHttpRequest.responseText); 
        } 
       }); 

       $(this).dialog("close"); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     } 

    }); 
    $('#dlgDutyList').dialog('open'); 

CỐ ĐỊNH Mã sản phẩm:

function getLocal(name) { 
var rtn = ""; 
    $.ajax({ 
     type: "POST", 
     async: false, 
     url: "WebServices/FLSAService.asmx/GetLocalVariable", 
     dataType: 'json', 
     contentType: 'application/json; charset=utf-8', 
     data: JSON.stringify({ name: name }), 
     success: function (data) { 
      rtn = data.d; 
     } 
    }); 
return rtn; 
} 

Answer 1

Nó đánh bại mục đích của AJAX để sử dụng nó đồng bộ (AJAX là viết tắt của Asynchronous JavaScript and XML).

Bây giờ bạn có thể không return một giá trị từ phương pháp thành công, nhưng bạn có thể lưu nó trong một biến và sau đó trở về mà

function getLocal(name) { 
    var returnValue; 
    $.ajax({ 
     type: "POST", 
     async: false, 
     url: "WebServices/FLSAService.asmx/GetLocalVariable", 
     dataType: 'json', 
     contentType: 'application/json; charset=utf-8', 
     data: JSON.stringify({ name: name }), 
     success: function (data) { 
      returnValue = data.d; 
     } 
    }); 
    return returnValue; 
} 

---

Nhưng thích cách sẽ được sử dụng một deferred object

function getLocal(name, resultset) { 
    return $.ajax({ 
     type: "POST", 
     url: "WebServices/FLSAService.asmx/GetLocalVariable", 
     dataType: 'json', 
     contentType: 'application/json; charset=utf-8', 
     data: JSON.stringify({ name: name }), 
     success: function (data) { 
      resultset[name] = data.d; 
     } 
    }); 
} 

và gọi nó là

"Select": function() { 
    var results = {}; 
    var self = this; 
    $.when(getLocal("VERBID", results), getLocal("VERB", results)).then(function(){ 
     $.ajax({ 
      type: "POST", 
      url: "WebServices/FLSAService.asmx/SetDuty", 
      dataType: 'json', 
      contentType: 'application/json; charset=utf-8', 
      data: JSON.stringify({ 
       dutyNum: dutyNumber, 
       id: results.VERBID, 
       verb: results.VERB 
      }), 
      success: function(data) { 
       data = $.parseJSON(data.d); 
       if (data.ErrorFound) { 
        showMessage(data.ErrorMessage, 2, true); 
       } 
       else { 
        log('Set Duty: ' + data.StringReturn + ' (' + data.intReturn + ')'); 
       } 
      }, 
      error: function(XMLHttpRequest, textStatus, errorThrown) { 
       alert("updateDuty: " + XMLHttpRequest.responseText); 
      } 
     }); 
    }).always(function(){ 
     $(self).dialog("close"); 
    }); 
} 

Answer 2

Mọi thứ đều do hàm $ .ajax không trả về bất kỳ giá trị nào vì hành vi không đồng bộ của nó, lời khuyên của tôi là tạo tham số thứ hai cho phương thức getLocal được gọi là "gọi lại".

Đúng cách là để làm điều đó như sau:

function getLocal(name, callback) { 
    $.ajax({ 
     type: "POST", 
     async: false, 
     url: "WebServices/FLSAService.asmx/GetLocalVariable", 
     dataType: 'json', 
     contentType: 'application/json; charset=utf-8', 
     data: JSON.stringify({ name: name }), 
     success: function (data) { 
      var rtn = data.d; 
      callback(rtn); 
     } 
    }); 
} 

Sau đó, mã chính bạn phải tìm như thế (mã không đồng bộ):

//some code here 
buttons: { 
      "Select": function() { 
       getLocal("VERBID", function(id) { 
        getLocal("VERB", function(verb) { 
         $.ajax({ 
          type: "POST", 
          async: false, 
          url: "WebServices/FLSAService.asmx/SetDuty", 
          dataType: 'json', 
         //some code here 
        }); 
       }); 
//some code here 

Để cải thiện mã này, để làm cho hai các cuộc gọi không đồng bộ cùng một lúc, bạn có thể sử dụng đối tượng jQuery Deferred và chạy .resolve(data) trên nó ngay sau khi tất cả các cuộc gọi ajax nhận được phản hồi thích hợp.