使用 Ajax 从 modal 向 mySQL 发送数据

Question

我不确定我做错了什么。我正在尝试使用 ajax 将数据发送到带有 php 的 mySQL 服务器，但似乎没有发生任何事情。我的布局错了吗？我将如何绑定“提交”按钮，以便将数据从模式的用户输入提交到 mysql 数据库。我需要在不同的位置使用 ajax 还是可以？我也很困惑这种绑定是如何发生的。

<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

        var name = $('#name').val();
        var email = $('#email').val();
        var phonenumber = $('#phonenumber').val();

          //store in database
        $.ajax({
          url:"insert.php",
          method:"POST",
          data: {
            name: name,
            email: email,
            phonenumber: phonenumber
          }
        })

  })
})

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

  </script>

这是我用来向数据库发送数据的 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($conn,$_POST["name"]);
      $phonenumber = mysqli_real_escape_string($conn,$_POST["phonenumber"]);
      $email = mysqli_real_escape_string($conn,$_POST["email"]);


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



  }

  echo "Connected successfully";


?>

任何帮助将不胜感激。谢谢。

Answer 1

当前，当单击表格单元格时，您正在运行 $.ajax 查询。它应该在updateTable 内运行，当点击模态提交按钮时会调用它。从当前位置删除$.ajax 代码并更改updateTable 函数，如下所示：-

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

  $.ajax({
    url:"insert.php",
    method:"POST",
    data: {
      name: name,
      email: email,
      phonenumber: phonenumber
    }
  })
}

在 PHP 代码中，您缺少运行数据库查询的代码。在$sql 变量赋值下方，添加以下内容

mysqli_query($conn, $sql);