如何使用 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);