Question

我对Java语言非常陌生。我应该使用表格创建提交“产品数据”（例如图像，品牌，型号，屏幕尺寸，操作系统）后动态填充其内容的表格。

我已经尝试了一切，但似乎没有任何效果。

我设法创建了一个功能正常的提交按钮，该按钮将每个提交项目的数据加载到Web服务器上的数据库中。

是否可以发送AJAX GET请求以检索此数据？它应该返回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"
];

如果要提供其他详细信息，请使用返回的数据示例更新您的问题。

有没有一种方法可以使用ajax get请求和返回的json数据动态创建表的内容？

1 个答案: