如何使用 php 和 ajax 创建对象数组

Question

我的代码目前可以与 AJAX 一起使用，但是如果您输入要提交的内容并添加，然后单击您希望它破坏的另一个项目，该表会在不刷新的情况下创建一个新项目。 我需要这样做，以便在每次选择时将数据保留在文本字段中。

我试图弄清楚如何使它成为一个对象数组，但似乎无法使其工作。

这是我的 ajax 要求收集信息并获取我正在写入的 div

function orderShow(str) {
   if (str == "") {
       document.getElementById("orderText").innerHTML = "";
       return;
   } else {
       if (window.XMLHttpRequest) {
           // code for IE7+, Firefox, Chrome, Opera, Safari
           xmlhttp = new XMLHttpRequest();
       } else {
           // code for IE6, IE5
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
       xmlhttp.onreadystatechange = function() {
           if (this.readyState == 4 && this.status == 200) {
               document.getElementById("orderText").innerHTML+= this.responseText;
           }
       };
       xmlhttp.open("GET","getOrder.php?q="+str,true);
       xmlhttp.send();
   }
}

这是我的 php 格式化并将其打印到表格中，以便 ajax 放置在表格中

<?php require('includes/procs.php'); ?>

<?php
$PageName="";
$q = intval($_GET['q']);


$sql="SELECT * FROM parts WHERE PartID = '".$q."'";
$result =  mysqli_query($conn, $sql);?>

<?php
while($rs=mysqli_fetch_assoc($result)) {

      echo "<tr class="."orderList"." >";
      echo "<td class="."vendorDetails"." >" . $rs['PartID'] . "</td>";
      echo "<td class="."vendorDetails".">" . $rs['Description'] . "</td>";
      echo "<td class="."vendorDetails"."><input type="."text"." name=".$rs['PartID']." id="."part".$rs['PartID']." onchange='calculatePrice('document.getElementById'('part".$rs['PartID']."').innerHTML;');' value=".""." >
      <input type="."hidden"."  value=".$rs['Price']."></td>";
      echo "</tr>";
  }

echo "
";
mysqli_close($conn);
?>

我希望它保留已经输入的数据。 然而它摧毁了它。 见下面的图片

Answer 1

您对 js 不放心，因此您必须在包含您的客户篮子的前端保留一系列对象

var basket = [];

并将新项目一次一个发送到 php，然后 php 将新存储的项目发送回前面 json

'{id:852,label:"atomic rocket",price:14544548785}'

然后您将此 json 字符串转换为 js object

var itemToAdd = JSON.Parse(this.responseText);

然后将其添加到表中：

  var table = document.getElementById("myTable");
  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = itemToAdd.id;
  cell2.innerHTML = itemToAdd.label;
  cell3.innerHTML = itemToAdd.price;

这是一个开始

或者，您可以将商品添加到您的购物篮

basket.push(itemToAdd)

并重绘整个表体

var tableBody = document.querySelector("#myTable body");
tableBody.innerhtml = "";
let html="";
basket.forEach(function(x){
   html+= "<tr>";
   html+= "<td>" + x.id + "</td>";
// ... idem with label and price
   html+= "</tr>";
});
tableBody.innerhtml =html;

所以首先：尝试从 php 发回这样的字符串

'{id:852,label:"原子火箭",价格:14544548785}'

并将其添加到篮子中

让我们保持联系并告诉我们您的进展

不要寻找食谱，搜索，理解和应用

再见

Answer 2

为了让它正常工作，我实际上所要做的就是改变线路

document.getElementById("orderText").innerHTML+= this.responseText;

至

$("#orderText").append(this.responseText);