Ajax技术实现MySQL数据提交（ajax提交到mysql）

Ajax技术实现MySQL数据提交

在现代Web应用程序中，Ajax技术极为常见，其主要作用是实现无需刷新浏览器页面即可提交表单或其他请求。在本文中，我们将介绍如何使用Ajax技术将表单数据提交到MySQL数据库中。

1. 创建表单

我们需要创建一个HTML表单，以便我们可以收集数据。以下是一个基本表单的示例代码：

  Name:
  

  Eml:
  

  Phone:
  

  

2. 编写Ajax代码

接下来，我们需要编写一个Ajax函数，该函数将收集表单数据并将其提交到MySQL数据库。

function submitForm() {
  var name = document.getElementById('name').value;
  var eml = document.getElementById('eml').value;
  var phone = document.getElementById('phone').value;

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("myForm").reset();
      alert('Form submitted successfully');
    }
  };
  xmlhttp.open("GET", "insert.php?name=" + name + "&eml=" + eml + "&phone=" + phone, true);
  xmlhttp.send();
}

在上面的代码中，我们首先收集了表单中的数据。然后，我们创建一个XMLHttpRequest对象并定义一个回调函数，该函数在Ajax请求完成时执行。

接下来，我们打开了一个GET请求，其中包含表单数据。在这个URL中，我们将数据作为参数提供。通过将其作为参数传递给insert.php页面，我们可以从JavaScrip代码向服务器提交表单数据。我们将请求发送到服务器。

3. 创建insert.php文件

我们需要编写一个PHP页面来处理我们从表单中收集的数据，并将其插入到MySQL数据库中。以下是一个基本的insert.php文件：

$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$name = $_GET['name'];
$eml = $_GET['eml'];
$phone = $_GET['phone'];

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否正常
if ($conn->connect_error) {
  die("Connection fled: " . $conn->connect_error);
}
// 插入数据
$sql = "INSERT INTO MyGuests (firstname, eml, phone) VALUES ('$name', '$eml', '$phone')";
if ($conn->query($sql) === TRUE) {
  echo "New record created successfully";
} else {
  echo "Error: " . $sql . "
" . $conn->error;
}
$conn->close();
?>

在上面的代码中，我们首先收集了从JavaScript传递的表单数据。然后，我们创建一个MySQL连接并将数据插入到数据库中。我们关闭了连接并输出成功或错误消息。

结论

使用Ajax技术，我们可以轻松地将表单数据提交到MySQL数据库中。上面的代码示例只是一个简单的演示，实际生产环境中需要更多的错误处理和验证。然而，这应该为您提供了一个良好的起点，以便您可以尝试自己的应用程序。