javascript - 将信息从模态提交到 mySQL

Question

我在将信息从模态提交到 mySQL 时遇到了一些问题，这就是我尝试过的。

<script>
var cells = document.querySelectorAll('.table-row > td');
var cellIndex = -1;
    cells.forEach((e, index) => {
    e.addEventListener("click", () => {
        //show modal
    $('.modal').modal("show");
        //update grid
    // This is the row number
    console.log("Row number: ", index)
    cellIndex = index
 })
})

function updateTable(e) {
let name, email, phonenumber, tableRow, row;
name = document.getElementById("name").value;
console.log(name, email, phonenumber);
// Get the row that you want
row = cells[cellIndex];
$(row).html(name);
$('.modal').modal("hide");
}

document.getElementById("submit-btn").addEventListener("click", updateTable);


  //store in database
  $.ajax({
    url:"insert.php",
    method:"POST",
    data:$('#insert_form').serialize(),
    success:function(data)
    {
      alert('form was submitted');
    }
  })

</script>

这是我的 insert.php：

    <?php

    $conn = new 
    mysqli("127.0.0.1","root","password");

     if($conn->connect_error){
       die("Connection failed: " . $conn- 
    >connect_error);
      }

     if(!empty($_POST))
     {
         $output = '';
         $name = 
 
 mysqli_real_escape_string($connect,$_POST["name"]);
       $phonenumber = 
 
 mysqli_real_escape_string($connect,$_POST["phonenumber"]);
      $email = 
 mysqli_real_escape_string($connect,$_POST["email"]);


      $query = "INSERT INTO users(name,phonenumber,email) VALUES('$name',
                '$phonenumber','$email' )";

        

  }

  echo "Connected successfully";


?>

我对这个问题的理解是，我需要使用 ajax 向 Web 服务器发送请求，该请求将使用 php.ini 中的给定查询将信息从模态存储到 mySQL 数据库。也许我对这个问题没有很好的理解。我不确定如何从模式中获取值，并结合使用 ajax 将帖子发送到服务器。任何帮助，将不胜感激。

这是我的模态：

<div class="row">
    <div class="col-md-12">

      <div class="modal fade" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1>Reservation</h1>
            </div>
            <div class="modal-body">

              <input type="text" name="field1" placeholder="Name" id="name">

              <input type="text" name="field2" placeholder="Email" id="email">

              <input type="text" name="field3" placeholder="PhoneNumber" id="phonenumber">

            </div>
            <div class="modal-footer">

              <input id="submit-btn" name="submit" class="btn submit" value="Submit">
              <input class="btn btn-default" data-dismiss="modal" value="Close">

            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
    

标签： javascriptphp