返回JSON來的JavaScript

Question

我作出這樣一個JSON調用一個ASHX處理程序：

attributes = $("#pageHtmlTag").attr("class").trim(); 
urlToHandler = 'JSonTestHandler.ashx'; 
jsonData = '{' + attributes + '}'; 

$.ajax({ 
    url: urlToHandler, 
    data: jsonData, 
    dataType: 'json', 
    type: 'POST', 
    contentType: 'application/json', 
    success: function (data) { 
     setAutocompleteData(data.responseDateTime); 
     $("body").add("<div>" + data.toString() + " </div>").appendTo(document.body); 
     alert("grate suceees"); 
    }, 
    error: function (data, status, jqXHR) { 
     alert('There was an error.' + jqXHR); 
    } 
}); // end $.ajax 

我receieve它和proccess它。我也想發回一些HTML來顯示，但我不知道如何發送回到Jscript的HTML。

ASHX：

string jsonData = new StreamReader(context.Request.InputStream, System.Text.Encoding.UTF8).ReadToEnd(); 

............................. 

     var testResultReportString = testResultReport.GetReportHtml(); 

     var serializer = new JavaScriptSerializer(); 
     var jSonTestResultReport = serializer.Serialize(testResultReportString); 

     context.Response.Write(jSonTestResultReport); 

所以，問題是。我如何將數據返回到Ajax調用成功函數？

Answer 1

你可以回到你的數據JSON對象：

var outputObject = "{ html = '" + jSonTestResultReport + "' + someOtherData = ... + "}"; 
context.Response.Write(outputObject); 

和訪問他們的成功的功能是這樣的：

data.html and data.someOtherData 

Answer 2

在應用我正在期運用這樣它的下面我顯示所有我狀態數據與國家ID和數據綁定到狀態下拉列表像這樣..

StateData objStateData = new StateData(); 
      LMGDAL.db_LMGEntities dbData = new db_LMGEntities();    
      var data = (from con in dbData.tblStates 
         where con.State_CountryID == ID 
         select new StateData 
         { 
          StateID = con.StateID, 
          StateName = con.StateName 
         }).ToList(); 
      return data.ToArray(); 

和同樣在.ashx的文件

[Serializable] 
    public class StateData 
    { 
     public int StateID { get; set; } 
     public string StateName { get; set; } 
    } 

內，在我的形式

$("#ddlCountry").change(function() { 
      var countryID = $("#ddlCountry").val(); 
      $.ajax({ 
       type: "POST", 
       url: "JsonData.asmx/GetStateByCountryID", 
       contentType: "application/json; charset=utf-8", 
       dataType: 'json', 
       data: '{ID:"' + countryID + '"}', 
       success: function (msg) { 
        var data = msg.d; 
        var stateData = ""; 
        $.each(data, function (index, itemdata) { 
         stateData += "<option value='" + itemdata.StateID + "' > " + itemdata.StateName + " </option>"; 
        }); 
        $("#ddlState").empty(); 
        $("#ddlState").append("<option value='0'>-Select State-</option>"); 

        $("#ddlState").append(stateData); 
       }, 
       error: function() { 
        alert('Faild To Retrieve States.'); 
       } 
      }); 
     }); 

我認爲這將有助於你.....

Answer 3

您不能返回的數據創建一個新類由於您的數據在異步時調用$.ajax後不能立即使用，所以由AJAX呼叫返回。你可以返回的是由AJAX調用返回的數據的承諾。一個承諾是一個很好的抽象函數說：我不能返回你的數據，因爲我還沒有它，我不想阻止，讓你等待，所以這是一個承諾，而你可以稍後使用它，或者只是把它交給其他人，並用它來完成（Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patterns in JavaScript）。例如，而不是：

$.ajax({ 
    url: urlToHandler, 
    data: jsonData, 
    dataType: 'json', 
    type: 'POST', 
    contentType: 'application/json', 
    success: function (data) { 
     setAutocompleteData(data.responseDateTime); 
     $("body").add("<div>" + data.toString() + " </div>").appendTo(document.body); 
     alert("great success"); 
    }, 
    error: function (data, status, jqXHR) { 
     alert('There was an error.' + jqXHR); 
    } 
}); // end $.ajax 

你可以寫你的Ajax功能，就像回到您$.ajax(...)調用的返回值：

function testResultReportAjax() { 
    return $.ajax({ 
     url: urlToHandler, 
     data: jsonData, 
     dataType: 'json', 
     type: 'POST', 
     contentType: 'application/json', 
     error: function (data, status, jqXHR) { 
      alert('There was an error.' + jqXHR); 
     } 
    }); 
} 

您通過

var promise = testResultReportAjax(); 

方式得到你的承諾

然後您可以在函數調用中將其用作參數，並使用由AJAX調用返回的數據：

promise.success(function (data) { 
    alert(data); 
}); 

您可以查看simple DEMO here。如果需要，請參閱this answer以獲得更好的解釋。