如何使用ajax将表中的所有数据插入数据库

Question

下面是我的代码和我到目前为止所做的事情。

如何在单击#OrderSave按钮后使用ajax将表中的所有数据插入数据库？

<table class="table table-sm table-striped table-hover" id="tbltrs">
    <thead>
        <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Qty</th>
        </tr>
    </thead>
    <tbody id="tbodydata"></tbody>
</table>

<button type="button" id="orderSave" class="btn btn-sm btn-secondary">Process</button>

$（“#code”）.bind（“blur keypress”,function（event）{event.preventdefault（）；if（event.keycode===13 event.type=='blur'){var vals=$('#code').val（）；$.ajax（{type：'post‘,url：'check.php',cache：false,dataType：“json”,data：{code：vals},success：function（data）{if（data['ok']>0){var qty=1；var elems=$('#tbltrs td').filter（function（）{return$.trim($(this).text())===data['name']；}）；if（elems.length）{var qty=parseInt(elems.parent('tr').find('#qty').val（））+1；elems.parent('tr').find('#qty').val（qty）；}else{var html=“”；html+=“”；html+=“”+data['product']+“；html+=”“+data['price']+”；html+=“”；$('#tbodydata').prepend(html)；}}else{alert('none')；}

$('#orderSave').click(function() {
$.ajax({
type: 'POST',
url: 'orders.php',
cache: false,
data:............,
success: function(data) {
printWindow = window.open("", "", "height=1, width=1");
printWindow.document.write(data);
printWindow.focus();
printWindow.print();
printWindow.close();
},
error:function(err){alert("error"+JSON.stringify(err)); }
});
});

Answer 1

您需要序列化表单并使用提交事件我们使用e.preventDefault()不提交

您确实需要名称属性

另外，我建议在附加/预附加数据时不要使用ID

您忘记了一个文档。请关闭使用文档的地方。写入

最后，当您使用模板文字时，html是否更易读

$('#tbodydata').prepend(`<tr>
<td class="d-none"><input type="text" name="id" id="id" value="${data['id']}"></td>
<td class="col" name="product">${data(product)}</td>
<td class="col" name="price">${data(price)}</td>
<td class="col"><input type="text" name="qty" id="qty" value="${qty}"></td></tr>`);

$("#yourForm").on("submit",function(e) {
  e.preventDefault()
  const data = $(this).serialize();
  $.ajax({
    type: 'POST',
    url: 'orders.php',
    cache: false,
    data: data,
    success: function(data) {
      printWindow = window.open("", "", "height=1, width=1");
      printWindow.document.write(data);
      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
    },
    error: function(err) {
      alert("error" + JSON.stringify(err));
    }
  });
});