Есть ли способ создать содержимое таблицы динамически, используя запрос ajax get и возвращенные данные json?

Question

Я очень новичок в Javascript. Я должен создать таблицу, которая динамически заполняет ее содержимое после отправки «данных о продукте» (таких как: изображение, марка, модель, размеры экрана, ОС) с помощью формы.

Я перепробовал все, и ничего не кажется на работу.

Мне удалось создать работающую кнопку отправки, которая загружает данные каждого отправленного элемента в базу данных на веб-сервере.

Есть ли способ отправить AJAX ПОЛУЧИТЬ запрос на получение этих данных? Он должен вернуть JSON данные, чтобы я мог поместить эти данные в таблицу.

В данный момент мой запрос AJAX GET ничего не получает.

Извините за неисправный код:

    <table id="table1" border="1">


        <tr>
            <th>Image</th>
            <th onclick="sortTable(0)">Brand</th>
            <th onclick="sortTable(1)">Model</th>
            <th onclick="sortTable(2)">Screensize</th>
            <th onclick="sortTable(3)">OS</th>

        </tr>
       <tr></tr>
       <tr></tr>
       <tr></tr>
       <tr>
        <form action="<some url>" method="post" id="myForm">

            <td><label for="Image">Upload picture:</label>
            <input type="url" name="image" placeholder="Image" required id="Image"></td>
            <td><label for="Brand">Enter brand</label>
            <input type="text" name="brand" placeholder="Brand" required id="Brand"></td>
            <td><label for="Model">Enter model:</label>
            <input type="text" name="model" placeholder="Model" required id="Model"></td>
            <td><label for="Screensize">Enter screensize</label>
            <input type="number" name="screensize" placeholder="Screensize" required id="Screensize"> 
           </td>
            <td><label for="OS">Enter OS</label>
            <input type="text" name="os" placeholder="OS" required id="OS"></td>


        </tr>

    </table>

    <input type="submit" value="Submit">
</form>

<form action="https:url/reset" method="get">



<script>
function myFunction() {
  document.getElementById("myForm").reset();

}
</script>
<input type="button" onclick="myFunction()" value="Reset form">


</form>

<button type="button" onclick="loadDoc()">Request data</button>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("myForm").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "myForm_get.asp", true);
  xhttp.send();
}
</script>

Что я делаю не так?

Answer 1

Рассмотрим следующий пример jQuery.

$(function() {
  function loadDoc2Arr(dataSource, params) {
    if (params == undefined) {
      params = {};
    }
    var results = [];
    $.get(dataSource, params, function(data) {
      $.each(data, function(i, v) {
        results.push(v);
      });
    });
    return results;
  }

  function resetForm(tObj) {
    var formData = loadDoc2Arr("myForm_get.asp");
    if (formData.length) {
      $.each(formData, function(index, value) {
        $("input", tObj).eq(index).val(value);
      });
    } else {
      console.log("Form Data was empty, sorry.");
    }
  }

  $("#req-data").click(function() {
    resetForm($(this).closest("form"));
  });

  $("#reset-form").click(function() {
    $(this).closest("form")[0].reset();
  });
});

input[type='submit'] {
  font-weight: bold;
}

.button-bar {
  margin: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="<some url>" method="post" id="myForm">
  <table id="table1" border="1">
    <thead>
      <tr>
        <th>Image</th>
        <th onclick="sortTable(0)">Brand</th>
        <th onclick="sortTable(1)">Model</th>
        <th onclick="sortTable(2)">Screensize</th>
        <th onclick="sortTable(3)">OS</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><label for="Image">Upload picture:</label>
          <input type="url" name="image" placeholder="Image" required id="Image"></td>
        <td><label for="Brand">Enter brand</label>
          <input type="text" name="brand" placeholder="Brand" required id="Brand"></td>
        <td><label for="Model">Enter model:</label>
          <input type="text" name="model" placeholder="Model" required id="Model"></td>
        <td><label for="Screensize">Enter screensize</label>
          <input type="number" name="screensize" placeholder="Screensize" required id="Screensize">
        </td>
        <td><label for="OS">Enter OS</label>
          <input type="text" name="os" placeholder="OS" required id="OS">
        </td>
      </tr>
    </tbody>
  </table>
  <div class="button-bar">
    <input id="submit-form" type="submit" value="Submit" default /> <input id="reset-form" type="button" value="Reset form" /> <button id="req-data" type="button">Request data</button>
  </div>
</form>

В этом фрагменте предполагается, что myForm_get.asp вернет некоторое количество данных, я бы предложил JSON. Например:

[
  "https://i.imgur.com/P1nh9JZ.jpeg",
  "Canadian Syrup",
  "CS-1867",
  "42",
  "Windows 95"
];

Если он предоставляет некоторые другие детали, обновите ваш вопрос с примером возвращаемых данных.