从html表单插入mysql数据库而不重定向[重复]

Question

我正在使用一个 mysql 数据库和一个我试图与之通信的网页。

这是我的情况：

我有一个 listmat.php 文件，它可以回显表 Material 中的所有记录，并且它可以工作。

现在我设法在特定的div 中显示listmat.php 文件的输出，而无需使用以下代码刷新漏洞页面：

<script>
$(document).ready(function(){
  $("#matbutton").click(function(){
    $("#matins").load('listmat.php');
  });
});
</script>

matbutton 是表单中提交按钮的 ID，matins 是 div 的 ID，其中我显示了 listmat.php 的输出

这是我的表格：

<form id="formmatins" method="post" action="listmat.php">
<p>Name:<input type="text" Name="Mat" id="Material"></p>
<center><input type="submit" value="Insert/Remove" id="matbutton"></center>`
</form>

我想做的是使用matbutton 在listmat.php 回显他的所有记录的表中插入文本框的值。这样每次我点击一条记录都会插入并在 div 中显示新表

问题是，如果我使用 post 方法在表单中插入按钮，通过单击它会重定向到输出更改页面，但如果我把它拿出来，回声工作但我显然无法将文本框的值传递给listmat.php 文件作为插入的参数，因为按钮对 post 方法不感兴趣。

我环顾四周，看起来解决方案在 jquery/ajax 中使用了一些铰接结构，但我真的不知道如何解决。任何帮助将不胜感激

更新

<script>
  $(function () {

    $('#formmatins').on('submit', function (e) {

      e.preventDefault();

      $.ajax({
        type: 'post',
        url: 'listmat.php',
        data: $('#formmatins').serialize(),
        success: function () {
        $("#matins").load('listmat.php');
          alert('form was submitted');
        }
      });

    });

  });
</script>

再次切换页面

更新

<?php
$user = "**";
$pass = "**";
$db = "**";
$host = "localhost";

$con = mysqli_connect($host,$user,$pass,$db);
        if (mysqli_connect_errno())
       {
           echo "Failed to connect to MySQL: " . mysqli_connect_error();
       }
$m = $_POST['Mat']; //the text box in the form
$ins = $con->query("INSERT INTO mattemp (Material) VALUES ('$m')");
$query = $con->query("SELECT Material FROM mattemp");
while ($row = $query->fetch_assoc()) {
  echo $row['Material']."<br>";
    }
?>

它打印每次更新的表格，但仍然在一个新页面中......我做错了什么？

自己解决

感谢所有试图帮助我的人。在帖子上给我 -1 的解决方案不正确，这里是我的代码的解决方案，以防有人遇到同样的问题

`<script>
  $(function () {
    $('#matbutton').on('click', function(event){
      event.preventDefault();
      $.ajax({
        type: 'post',
        url: 'listmat.php',
        data: $('#formmatins').serialize(),
        success: function (data) {
        $("#matins").load('listmat.php');}
      });

    });

  });
</script>`

Answer 1

你需要$.ajax

例如：

$.ajax({
    url: "your_url.php",
    type: "POST",
    data: $('#formmatins').serialize(),
    success: function(response){
        // Do something, or not...
    }
})