無法解析ajax響應中的JSON數據（包含HTML標記）

Question

編輯

我簡化了我試圖在PHP腳本中進行JSON編碼的數組。 php腳本中的returnArr現在只有一個鍵，值對，但我仍然收到無效的字符錯誤：

PHP script:
    $returnArr["a"] = "val";
    er('Content-type:application/json;charset=utf-8');
    echo(json_encode($returnArr));

---

我試圖從服務器端PHP腳本返回一個數組（以key => value的形式）到我的ajax調用。 Ajax接收響應但無法解析服務器返回的JSON數據。 在我解析ajax成功函數內返回數據的行上給出錯誤“無效字符”。

下面是我的服務器端腳本：

$returnArr = Array();

    header('Content-Type: application/json');
    foreach($selectUpdatedRecord as $eachRow)
    {
        $key = $eachRow['cat_id'];
        $htmlStr = '<td>'.$eachRow["cat_id"].'</td>
            <td>'.$eachRow["cat_name"].'</td>
            <td>
                <select name="statCat-catId-'.$eachRow["cat_id"].'" disabled="disabled">
                    <option value="'.$eachRow["cat_status"].'" selected="selected">'.$eachRow["cat_status"].'</option>
                    <option value="Enabled">Enabled</option>
                    <option value="Disabled">Disabled</option>
                </select></td>
            <td>'.$eachRow["created_at"].'</td>
            <td><button type="submit" id="save-cat-'.$eachRow["cat_id"].'" name="save-cat-'.$eachRow["cat_id"].'" class="btn btn-info save-ind">Save</button></td>
            <td><input type="checkbox" class="select_cats" name="cat_edit_array" value="'.$eachRow['cat_id'].'"></td>
        ';

        $returnArr[$key] = $htmlStr;
    }
    echo json_encode($returnArr);

僅供參考， $ key是數字， $ htmlStr變量將保存一些帶有值的表格單元格。 我將使用$ key來標識一些唯一的行，並使用相應的html內容填充行。 console.log（）調用只是一個測試，看看解析是否成功。 這是ajax函數：

$.ajax({
        type: "GET",
        url: "ajax_catEdit_loader.php",
        data:{'get_updatedData':sendDataToAjax},
        success: function(returnedText) {
                    console.log(JSON.parse(returnedText)); //--->error on this line
        error: function(xhr, status, error) {
                    alert("failed");
                    console.log("ajax failed: "+error);
                    }
        });

我試圖在ajax調用中包含數據類型：作為JSON並省略JSON.parse調用但仍然是相同的結果。

非常感謝一些幫助。

Answer 1

問題確實存在於JSON.parse中，但是，它還有一些問題。

問題-1： JSON.parse方法期望字符串作為參數。 因此，當您提供數組或對象時，您將收到錯誤。 檢查以下示例代碼：

    var obj = {};
    try {
        JSON.parse( obj );  
    }
    catch( err ) {
        console.error( err );
    }

問題2：現在，第二個問題不是 PHP中的json_encode（），因為你可能已經理解了它。 因為json_encode（）PHP函數確實返回了String。 但是，由於您要發送JSON MIME類型標頭：

header('Content-Type: application/json');

jQuery將其作為JSON對象接收。

默認情況下，PHP將輸出返回為html，因此如果刪除標題，則錯誤將不存在。 所以清除瀏覽器緩存並嘗試刪除標頭或使用以下任何一個標頭：

header('Content-Type: text/plain');
// or the default one:
// header('Content-Type: text/html');

問題3：您還需要了解jQuery ajax函數的dataType屬性。

根據文檔，dataType定義為：

您期望從服務器返回的數據類型。 如果沒有指定，jQuery將嘗試根據響應的MIME類型推斷它（XML MIME類型將產生XML，在1.4 JSON中將產生一個JavaScript對象，在1.4腳本中將執行腳本，其他任何東西將是以字符串形式返回）。

因此，當您未指定dataType時，由於您的MIME類型標頭，jQuery會自動將其作為JSON獲取。 因此，即使您指定：

dataType: 'json',

同樣的問題不會消失。 現在猜猜如果我們特意告訴jQuery以文本形式接收數據會發生什么：

dataType: 'text',

你可能猜對了。 一旦我們提到我們希望以文本形式接收數據，即使在PHP中我們發送JSON MIME類型頭文件，jQuery也會將其視為文本而JSON.parse將執行而不會出現錯誤。

注意：在通過更改標題進行測試時，請記住瀏覽器將緩存結果。 因此，每次使用新標頭進行測試時都需要清除瀏覽器緩存，或者使用其他隨機查詢字符串調用腳本，如下所示：

url: "ajax_catEdit_loader.php?rand=" + Math.random(),

您還可以從瀏覽器的開發人員工具的“網絡”面板中檢查瀏覽器接收的數據類型（如html，文本，json等）（數據類型將顯示在“類型”列中）。