Ajax調用后無法使用jquery解析json

Question

這是我的PHP腳本

<?php

$wishes_array["wishes_text"] = null;
$wishes_array["total"] = null;
$count = 0;
// wishes has all records
if(!is_null($wishes))
{
    foreach($wishes as $wish)
    {
        if($wish->text != null)
        {
             $wishes_array["wishes_text"][$count] = html_escape($wish->text);
             $count++;
        }
     }
     $wishes_array["total"] = sizeof($wishes);
     echo json_encode($wishes_array);
}
?>

背景

用戶使用按鈕發送其願望，但他可以選擇發送帶有其願望的消息，假設某人A剛剛發送了願望，但人B發送了帶有“生日快樂”文本的願望，人C發送了帶有文本“具有a願望”的願望生日快樂

現在使用此數組，我們得到一個數組，該數組告訴接收的願望total （帶有或不帶有願望文本），並wishes由人發送的願望文本。

問題

無法使用jquery解析json，這是我所做的，並且返回undefined

var total_start = '<div style="padding: 3px;margin: 10px auto;"><i class="fa fa-heart" style="background: #e53935; color: #fff;padding: 5px;border-radius: 50%;"></i> ';
var total_end = '</div>';
var startString = '<div style="padding: 3px;margin: 10px auto;"><i class="fa fa-heart" style="background: #e53935; color: #fff;padding: 5px;border-radius: 50%;"></i>';
var endSting = '</div>';
var wishes = '';
var count = 0;
if(data["wishes_text"] != null){
     $.each(data, function(index, element) {
         wishes += startString;
         wishes += ' ' + data["wishes_text"][count];
         wishes += endSting;
         count++;
     });
 }
 var total = "";
 if(data["total"] == 1)
 {
     total = total_start + data["total"] + ' person wished' + total_end;
 }
 else
 {
     total = total_start + data["total"] + ' people wished' + total_end;
 }
 $('#wish_div').html(total + wishes);

Ajax響應JSON

{"wishes_text":["wish 1","wish 2"],"total":3}

Answer 1

在你的代碼的問題很簡單，你試圖通過遍歷data ，而不是wishes_text包含在陣列data 。 請注意，您也可以稍微整理一下邏輯。 嘗試這個：

var total = '<div style="padding: 3px;margin: 10px auto;"><i class="fa fa-heart" style="background: #e53935; color: #fff;padding: 5px;border-radius: 50%;"></i>' + data["total"] + ' ' + (data.total == 1 ? 'person' : 'people') + ' wished</div>';
var startString = '<div style="padding: 3px;margin: 10px auto;"><i class="fa fa-heart" style="background: #e53935; color: #fff;padding: 5px;border-radius: 50%;"></i>';
var endSting = '</div>';
var wishes = '';

if (data.wishes_text != null) {
    $.each(data.wishes_text, function(index, element) {
        wishes += startString + ' ' + data["wishes_text"][index] + endSting;
    });
}
$('#wish_div').html(total + wishes);

工作實例

我還建議您考慮使用內聯樣式中的樣式表和類，以及模板庫，因為從最佳實踐的角度來看，JS代碼中的HTML很大塊的限制是“太大” 。