如何一次将所有表的行从脚本插入数据库答案

【问题标题】：how can insert all table's rows from script to database at once如何一次将所有表的行从脚本插入数据库
【发布时间】：2019-08-30 17:53:27
【问题描述】：

我有一个问题...这里每次用户按下添加按钮时都会创建表的行，我如何将表的所有数据一次发送到数据库，因为当按下提交时，只插入最后一行插入数据库而不是所有表，但它应该提交包含所有数据的所有行

我是 php 新手，所以我没有很多 php 代码这是php代码

<?php
include_once("dbinfo.php");
session_start();
$name= $_SESSION['user'];
if(isset($_POST['savepav'])){
     date_default_timezone_set("Asia/Riyadh");
  $pavdate= date("Y/m/d");
  $pavtime=date("h:i:sa");
  $pavloca=$_POST['pavlocation'];
  $pavtype=$_POST['ddlPassport'];
  $pavdist=$_POST['pavedist'];
  $pavplan=$_POST['pavplan'];
  $pavseve=$_POST['pavseverity'];
    echo "<script>alert(' Pavement data saved successfully ');</script>";
  $query="INSERT INTO `pevement`(`userName`, `plocation`, `pavType`, `padistr`, `pavplan`, `severity`, `pavdate`, `pavtime`) VALUES ('$name' ,'$pavloca', '$pavtype', '$pavdist' ,'$pavplan', '$pavseve', '$pavdate' ,'$pavtime')"; 
  $result_query=mysqli_query($conn,$query);
}
?>

这是脚本代码

<script>
function AddData() {
  var rows = "";
  var name = document.getElementById("locapavm").value;
  var city = document.getElementById("sevepavm").value;
  var plan = document.getElementById("planpavm").value;

  rows += "<tr><td>" + name + "</td><td>" + city + "</td><td>" + plan + "</td><td><button onclick = deleterow(this)>Delete</button></td></tr>";
  $(rows).appendTo("#list tbody");
}

function ResetForm() {
  document.getElementById("person").reset();
}

function deleterow(el) {
  $(el).closest('tr').remove();
}
</script>

和 HTML

<html>
<div id = "data">
    <form id = "person">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="col-12" style="width: 1514px">
    <select id = "locapavm" name = "pavlocation" style="width: 26%">
            <option value="">- Location -</option>
            <option value="Runway 17">Runway 17</option>
            <option value="Runway 35">Runway 35</option>
            <option value="Runway 18">Runway 18</option>
            <option value="Runway 36">Runway 36</option>
</select><br>
<div class="col-12">
                                                    <select id = "ddlPassport" name = "ddlPassport" style="width: 26%" onchange = "ShowHideDiv()">
                                                        <option value="">- Pavement Type -</option>
                                                        <option value="Flexible Pavement (Asphalt)">Flexible Pavement (Asphalt)</option>
                                                        <option value="Rigid Pavement (Concrete)">Rigid Pavement (Concrete)</option>
                                                </select>
                                                </div><br/>
<div class="col-12" style="width: 1514px">
<select id="pavdistrees" name="pavedist" style="width: 26%">
    <option value="">- Distress selections - </option>
</select><br> </div>
 <div class="col-12" style="width: 1514px">
<select id="sevepavm" name="pavseverity" style="width: 26%">
    <option value="">- Severity -</option>
    <option value="Low">Low</option>
    <option value="Medium"> Medium</option>
    <option value="High">High</option>
</select><br> </div>
<!----------------------------------------------------------------------->
  <p class="auto-style1">Maintenance Plan:</p>  
   <textarea id="planpavm" name="pavplan" style="width: 572px; height: 129px" ></textarea><br> 
        <input id = "person"  type = "reset" value = " Reset " onclick = "ResetForm()">
        <input id = "button"  type = "button" value = " Add " onclick = "AddData()">

    </form>
</div>
<div id = "tab" style="width: 76%">
        <table style="width: 96%" id = "list" cellspacing = "0px" cellpadding = "20px" text-align = "center">
            <thead>
                <tr>
                    <td>Location</td>
                    <td>Pavement Type</td>
                    <td>Type Distrees</td>
                    <td>Severity</td>
                    <td style="width: 396px">Maintenance Plan</td>
                </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
</div>
<br><input type="submit" name="savepav" value="Submit"/>
</html>

【问题讨论】：

PDO Prepared Inserts multiple rows in single query的可能重复
您似乎对 SQL 注入攻击持开放态度。您应该对此进行调查并考虑使用准备好的语句。
我不知道用户会添加多少行我需要带有脚本表的代码

标签： javascript html mysql database

【解决方案1】：

我看到您正在使用 JQuery，因此我认为 XHR 将是您的最佳选择。如果您使用“添加”按钮将其添加到表中，那么除了重定向到不同的页面之外，我并没有真正看到“提交”按钮的意义，所以我将在此示例中省略它，并且如果您有不同的计划，请稍后编辑我的答案。

您的 PHP 代码看起来不错，但它容易受到 SQL 注入攻击。为了防止这种情况，我会在你放入数据库的所有字符串上调用mysql_real_escape_string 方法，如下所示：

  $pavloca=mysql_real_escape_string($_POST['pavlocation']);
  $pavtype=mysql_real_escape_string($_POST['ddlPassport']);
  $pavdist=mysql_real_escape_string($_POST['pavedist']);
  $pavplan=mysql_real_escape_string($_POST['pavplan']);
  $pavseve=mysql_real_escape_string($_POST['pavseverity']);

对于 HTML，我会给您的 Add 按钮提供 submit 的类型，然后将 action 和 method 属性添加到您的开始表单标记中，如下所示：

<form id = "person" method = "POST" action = "/path/to/php/page">

其中/path/to/php/page 是将所有内容添加到数据库的 PHP 页面的路径。

最后是 JavaScript。

我不会在您的Add 按钮上使用onclick 属性，而是将其删除，然后只需将这段JQuery 添加到您的脚本标签：

$("#person").submit(function(d){
d.preventDefault();
AddData(new FormData(d.target));
})

然后为您的 AddData 函数添加表单的输入参数：

function AddData(form)

P.S，在你完成之后的一个小技巧，你实际上可以通过 name 属性而不是像这样的 id 来获取值：

var name = form["pavlocation"];
var city = form["pavseverity"];
var plan = form["pavplan"];

最后但同样重要的是，将这段代码添加到 AddData() 函数的末尾：

var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action);
xhr.send();

应该就是这样！

注意：我没有对此进行任何测试，因此对于任何拼写错误或语法错误，我深表歉意。如果这不起作用，我将相应地编辑我的答案。

编辑：您发布的 HTML 中有几个乱序标签，所以我通过 IDE 运行它来清理一下，并在此处为它创建了一个 JSFiddle：https://jsfiddle.net/djy9vget/2/

您必须将action="/path/to/php/page.php" 位更改为实际路径，但除此之外，这应该可以工作。我还注意到我的原始答案中有一个错字，XmlHttpRequest(); 应该是XMLHttpRequest();。

我还将Reset按钮的ID从person（与表单相同）更改为reset。

【讨论】：

首先非常感谢你的帮助..不使用添加按钮的原因是当按下它会刷新页面并丢失数据如果有添加行和提交数据的方法数据库同时无需重新加载整个页面帮助我做到这一点
添加我尝试你的代码但也只有最后一行将提交到数据库而不是所有行
d.preventDefault(); 函数防止页面刷新。您是使用带有代码的Add 按钮还是Submit 按钮？您可能有更多没有分享的 HTML/JavaScript，但从您分享的内容来看，Submit 按钮似乎没有任何作用。
我刚刚意识到您的 PHP 代码在对数据库进行任何操作之前会检查 savepav 的存在。您也许可以删除它并且没问题。我可能遗漏了一些东西，但据我所见，它看起来弊大于利。
我有一个本地主机数据库，添加按钮不是提交，但提交是提交按钮，没有其他我分享的内容我不知道为什么提交时重新加载页面，你能解释一下吗如何使用 d.preventDefault();又来了？