Как создать массив объектов с 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, поэтому в минимумах ad вам придется хранить массив объектов на внешнем интерфейсе, содержащий вашу клиентскую корзину

var basket = [];

и отправлять новые элементы по одному на php, затем php отправляет обратно на фронт вновь сохраненный элемент в json

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

, затем вы преобразуете эту строку json в объект js

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, метка: "атомная ракета", цена: 14544548785}'

и добавить ее ккорзина

Будем на связи и расскажем о вашем прогрессе

Не ищите рецепт, не ищите, не поймите и не примените

До скорой встречи

Answer 2

Так что все, что я действительно должен был сделать, чтобы заставить его работать правильно, это изменить строку

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

до

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