Question

我有一个问题...每次用户按下“添加”按钮时，都会在此创建表的行，如何只按提交插入数据库中的最后一行而不是全部插入时，一次将表的所有数据发送到数据库？表，但应提交包含所有数据的所有行

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

Answer 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属性添加到您的打开表单标签中，如下所示：< / p>

<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)

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。

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

1 个答案: