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 
}