javascript - 获取在模式中输入的数据以保存在数据库中

Question

我是网络开发方面的菜鸟，所以我一直致力于从模式中获取数据并将其保存到数据库。 我用 Bootstrap 制作了模型。下面是模态代码

<小时/>

模态代码

    <form name="form" action="post" method="">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>
</form>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add parts</h4>
      </div>
      <div class="modal-body">
      <input type="text" name="field1" placeholder="Part Name" id="pName" />
      <br>
      <br>
      <input type="text" name="field2" placeholder="Piece Code" />
      <br>
      <br>
      <input type="text" name="field3" placeholder="Piece Price" />
      <br>
      <br>

      <input type="text" name="field4" placeholder="Quatity" />
      <br>
      <br>
      <input type="text" name="field5" placeholder="Total" />
      <br>
      <br>
      <input type="text" name="field6" placeholder="Comments" />
      <br>
      <br>
      <input type="text" name="field7" placeholder="Shipped" />
      <br>
      <br>

      </div>
      <div class="modal-footer">
        <button onclick="saveit()" type="button" name="saveBtn" class="btn btn-default" data-dismiss="modal">save</button>
    </div>
    </div>
    </div>
</div>

我想要完成的是通过按模式中的保存按钮获取在此弹出模式中输入的数据，将其保存在数据库中，并清除弹出窗口，以便用户可以再次输入数据。我想通过使用 PHP 查询来保存数据。请建议我一种方法来完成它。我看过很多教程，几乎也看过有关堆栈溢出的每个问题，但我无法完成它。

Answer 1

你可以使用ajax来做到这一点；试试这个

您的联系页面

<div id="contact">
<h3>Contact Us For Any Query</h3>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Add part</button>


<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

    <!-- Modal content-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>    
<script>

$(function(){
$(document).on("click", ".button", function(e) {
e.preventDefault();

        var info = $("#form").serialize();  
        $.ajax({

            type: "POST",
            url: "add.php",
            data: info,
            success: function(result){

                //$("#form")[0].reset();
                  $('#notification').html(result); 

            }
        });

        e.preventDefault();

    });

});


</script>

<!--div for notification    -->
<div id="notification"></div>   



<div id="form" class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Add parts</h4>
      </div>
      <div class="modal-body">
      <input type="text" name="field1" placeholder="Part Name" id="pName" />
      <br>
      <br>
      <input type="text" name="field2" placeholder="Piece Code" />
      <br>
      <br>
      <input type="text" name="field3" placeholder="Piece Price" />
      <br>
      <br>

      <input type="text" name="field4" placeholder="Quatity" />
      <br>
      <br>
      <input type="text" name="field5" placeholder="Total" />
      <br>
      <br>
      <input type="text" name="field6" placeholder="Comments" />
      <br>
      <br>
      <input type="text" name="field7" placeholder="Shipped" />
      <br>
      <br>

      </div>
      <div class="modal-footer">
        <button type="button" name="saveBtn" class="btn btn-default button" data-dismiss="modal">save</button>
    </div>
    </div>
    </div>
</div>
</div>

以及用于添加数据的 PHP 页面，即 add.php

<?php

    //connection to your database
    //remember to change the host, dbname, and password to yours, 
    $db = new PDO('mysql:host=localhost;dbname=databasename;charset=UTF-8', 
                  'root', 
                  '',
                  array(PDO::ATTR_EMULATE_PREPARES => false,
                  PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));


?>
<?php

if (isset($_POST['field1'])) {

    $field1 = $_POST['field1'];
    $field2 = $_POST['field2'];
    $field3 = $_POST['field3'];
    $field4 = $_POST['field4'];
    $field5 = $_POST['field5'];
    $field6 = $_POST['field6'];
    $field7 = $_POST['field7'];




    $stmt = $conn->prepare("INSERT INTO `table` (field1,field2,field3,field4,field5,field6,field7)
    VALUES (:field1, :field2, :field3, :field4, :field4, :field5, :field6, :field7)");
    $stmt->bindParam(':field1', $field1);
    $stmt->bindParam(':field2', $field2);
    $stmt->bindParam(':field3', $field3);
    $stmt->bindParam(':field4', $field4);
    $stmt->bindParam(':field5', $field5);
    $stmt->bindParam(':field6', $field6);
    $stmt->bindParam(':field7', $field7);

    $stmt->execute();

    echo 'added';

}

?>

希望我的回答对您有帮助: