jQuery Ajax Calculator問題

Question

我遇到了一些問題，顯示通過ajax請求從php文件傳遞的錯誤消息。

問題是，當我收到少於3個應該顯示在無序列表中的錯誤消息時。我不想顯示任何「未定義」變量 - 這就是爲什麼我沒有通過一條語句將它們添加到無序列表中的原因。

有什麼建議嗎？

calculator.html

<div id="calculator"> 
<form> 
    <input type="text" name="years"/> 
    <label>How many years have you smoked for?</label><br /> 

    <input type="text" name="smokes"/> 
    <label>How many cigarettes do you smoke each day?</label><br /> 

    <input type="text" name="price"/> 
    <label>How much do you spend on each pack of cigarettes?</label><br /> 

    <input type="submit" value="Show My Totals" name="submit" /> 
</form> 

<div id="result"></div> 
</div><!-- end calculator --> 

calculator.js

$(function(){ 
    $("#calculator form").submit(function(){ 
     dataString = $("#calculator form").serialize(); 

     $.ajax({ 
     type: "POST", 
     url: "./calc.php", 
     data: dataString, 
     dataType: "json", 
     success: function(data) { 
      if(data.totalSmoked != null && data.totalSmoked != undefined && 
      data.totalCost != null && data.totalCost != undefined && 
      data.totalWeight != null && data.totalWeight != undefined) 
      { 
       $("#calculator #result").html("<ul><li>" + data.totalSmoked + "</li><li>" + data.totalCost + "</li><li>" + data.totalWeight + "</li></ul>"); 
      } 
      else 
      { 
       $("#calculator #result").html("<ul>"); 

       if(data.yearsError != null && data.yearsError != undefined) { 
        $("#calculator #result ul").html("<li>" + data.yearsError + "</li>"); 
     } 

     if(data.smokesError != null && data.smokesError != undefined) { 
        $("#calculator #result ul").html("<li>" + data.smokesError + "</li>"); 
     } 

     if(data.costError != null && data.costError != undefined) { 
      $("#calculator #result ul").html("<li>" + data.costError + "</li>"); 
     } 

     $("#calculator #result").html("</ul>"); 

      /**** If I replace the above content within the 'else' block, it works however - This will display an "undefined" variable if there are less than 3 errors ****/ 
      //$("#calculator #result").html("<ul><li>" + data.yearsError + "</li><li>" + data.smokesError + "</li><li>" + data.costError + "</li></ul>"); 
      } 

     } 
     }); 
     return false; 

    }); 
}); 

Calculator.php中

$yearsSmoked = $_POST['years']; 
$smokesPerDay = $_POST['smokes']; 
$costPerPack = $_POST['price']; 
$errors  = array(); 
$results  = array(); 


/** 
* 
* 
* A bunch of error checking here... 
* 
* 
*/ 


if(!empty($results)) { 
    echo json_encode($results); 
} 
elseif(!empty($errors)) { 
    echo json_encode($errors); 
} 

UPDATE

我想它不起作用，因爲我在我的PHP文件中指定了數組鍵。把這個添加到我的else塊中工作...有種醜陋的方式。

if(data['yearsError'] != undefined) { 
    $("#calculator #result ul").append("<li>" + data['yearsError'] + "</li>"); 
} 

if(data['smokesError'] != undefined) { 
    $("#calculator #result ul").append("<li>" + data['smokesError'] + "</li>"); 
} 

if(data['costError'] != undefined) { 
    $("#calculator #result ul").append("<li>" + data['costError'] + "</li>"); 
} 

Answer 1

看起來像PHP中的$ error數組只是一系列的錯誤消息，對吧？由於它是PHP中的數組，它將成爲Javascript端的數組。您可以循環播放foreach循環，併爲找到的每個元素吐出<li>。

您還可以更改輸出數據結構並將它們合併爲一條消息，而不是嘗試檢測您發送的消息的版本。這樣，你的常規數據和錯誤結構總是存在。

PHP端：

$data = array(); 
$data['data'] = array(
    'totalSmoked' => 0, 
    'totalCost' => 0, 
    'totalWeight' => 0 
); 
$data['errors'] = array(); 
$data['errors'] = 'You smoked -1 packs? How's that possible?' // sample error message 

JavaScript端：

// this would only run if data.errors has a non-0 length, ie: there's error messages 
for(i = 0; i < data.errors.length; i++) { 
    $("#calculator #result ul").append('<li>' + data.errors[i] + '</li>'); // or whatever it would be in jquery 
}