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

Posted 2023-02-22

【中文标题】如何使用ajax将表中的所有数据插入数据库

【英文标题】：how to insert all data in table to database using ajax

【发布时间】：2021-05-10 16:22:54

【问题描述】：

以下是我的代码以及我目前所做的。

点击#orderSave按钮后？？

<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('模糊按键',function(event) event.preventDefault(); if (event.keyCode === 13 || event.type == '模糊') var vals = $('#code').val(); $.ajax( 类型：'POST', url: 'check.php', 缓存: false, dataType:"json", data:code: vals，成功：函数（数据）如果（数据['ok']> 0） 变量数量 = 1; var elems = $('#tbltrs td').filter(function() return $.trim($(this).text()) === data['name']; ); 如果（elems.length） var qty = parseInt(elems.parent('tr').find('#qty').val()) + 1; elems.parent('tr').find('#qty').val(qty); 别的 var html = ''; html += ''; html += ''+数据['产品']+''; html += ''+数据['价格']+''; html += ''; $('#tbodydata').prepend(html); 其他 alert('none'); $('#code').val('').focus(); , 错误：函数（错误）警报（“错误”+JSON.stringify（错误））； ); );

$('#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)); 
);
);

【参考方案1】：

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

你确实需要 NAME 属性

另外我建议在追加/前置数据时不要使用 ID

您忘记了使用 document.write 的 document.close

最后，当您使用模板文字时，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));
    
  );
);

【讨论】：

点击提交后，我只是从输入值中获取id和数量（此数据显示警报：id=2&qty%5B%5D=1&id=1&qty%5B%5D=1），如何获取产品名称和价格

抱歉，您需要 NAME 属性 - 请参阅更新。如果这仍然不起作用，请更新您的问题并使用相关 HTML 显示 minimal reproducible example

我添加了 NAME 属性但没有更改，我只得到了 id 和 qty。我仍然对如何输入mysql数据库感到困惑。如果#tbodydata 很多产品