jQuery：在jquery ajax json調用中返回字符串響應

Question

我使用jquery ajax請求和json作為數據類型將json數據傳遞給我的通用處理程序頁面GenericHandler.ashx.cs 。

在我的處理程序代碼中，我想以字符串格式返回html表。 這是我的處理程序代碼的快照

context.Response.ContentType = "text/plain";      
context.Response.Write(sResponse);

其中sResponse包含<table><tr><td>PropertyName</td><td>PropertyID</td></tr><tr><td>abc</td><td>1</td></tr></table>

我的jquery代碼（ 檢查錯誤函數中的內聯注釋 ）：

  id = { 'PropertyID': id };
    $.ajax("Handlers/GenericHandler.ashx?Type=getProperties",
    {
        type: 'post',
        dataType: 'json',
        cache: false,
        contentType: "application/json",
        data: JSON.stringify(id),
        success: function (data) {
            console.log(data);            
        },
        error: function (xhr, status) {
            console.log(status); // Output as parseError
            console.log(xhr.responseText); // My sResponse string ! But Why Here ?
        }
    });

我的問題 ：

1. 為什么我沒有得到成功功能的回應
2. 這是正確的方法嗎？ 或者我應該將html表轉換為json對象然后返回它。 並再次以表格格式顯示它？

Answer 1

從這里的 jQuery文檔中，您可以看到dataType參數是AJAX期望作為服務器響應的內容。 contentType參數是您對服務器的請求中的標頭中放置的內容，以便服務器知道如何讀取請求。

因此，您應該將dataType更改為“text”，如：

$.ajax("Handlers/GenericHandler.ashx?Type=getProperties",
{
    type: 'post',
    cache: false,
    dataType: 'text',
    contentType: "application/json",
    data: JSON.stringify(id),
    success: function (data) {
        console.log(data);            
    },
    error: function (xhr, status) {
        console.log(status);
        console.log(xhr.responseText); 
    }
});

我發現這在警告數據庫上成功的INSERT或UPDATE調用時很有用。 為這樣的任務創建和返回JSON對象是無關緊要的。

Answer 2

如果你告訴$.ajax你期望一個JSON，那么來自服務器的text/plain響應就不是一個有效的響應。

關於你的第二個問題：做到這一點的好方法是以JSON格式返回你想要使用的數據，例如：

[
  { "label" : "PropertyName", "value" : "abc" },
  { "label" : "PropertyId", "value" : "1" }
]

然后在Ajax請求的成功回調中，使用該數據使用jQuery構建HTML結構。

Answer 3

您的回復無效JSON正在返回純文本。 jQuery期望響應是JSON，因為你設置了contentType: "application/json"

如果站點的其余部分使用JSON作為傳輸格式，則將HTML包裝為JSON對象並將其返回。

在您的后端代碼中，返回看起來像這樣的內容

{response_html : "<table><tr><td>PropertyName</td><td>PropertyID</td></tr><tr><td>abc</td><td>1</td></tr></table>"}

在您的jQUery代碼中，您可以在成功回調中訪問它。

success: function (data) {
    console.log(data.response_html);            
},

注意 - 您需要從后端代碼中刪除純文本內容類型並制作該JSON。