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

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

转载作者：行者123 更新时间：2023-11-29 09:35:26

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

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

最佳答案

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

您的 PHP 代码看起来不错，只是容易受到 SQL 注入(inject)攻击。为了防止这种情况，我将对您放入数据库中的所有字符串调用 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。

关于javascript - 如何一次将脚本中的所有表行插入数据库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57731271/

文章推荐： java - 如何将 JMX 配置为仅绑定(bind)到本地主机？

文章推荐： mysql - 将两个 python mysql 查询与条件组合起来

文章推荐： mysql - 在 Sun Unix 上为 Perl 安装 DBD::mysql 时出现问题

文章推荐： javascript - 如何使用 Mysql2 Promise 结束数据库连接？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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