时间戳

首页 > 解决方案 > 如何一次将所有表的行从脚本插入数据库

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

问题描述

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

我是 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>

标签： javascripthtmlmysqldatabase

解决方案

我看到您正在使用 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。

我不会在您的按钮上使用该onclick属性Add，而是将其删除，然后将这一点 JQuery 添加到您的脚本标记中：

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

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

function AddData(form)

PS，在你完成之后的一个小技巧，你实际上可以通过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"位更改为实际路径，但除此之外这应该可以工作。我还注意到我原来的答案 where XmlHttpRequest();should be中有一个错字XMLHttpRequest();。

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

推荐阅读