源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 表单无刷新录入信息到mysql的代码 [打印本页]
作者: 洪七公    时间: 2024-4-21 21:25
标题: 表单无刷新录入信息到mysql的代码

为了实现表单无刷新录入信息到MySQL，你可以使用AJAX（Asynchronous JavaScript and XML）来异步提交表单数据。下面是一个简单的例子，演示了如何使用jQuery和AJAX将表单数据提交到服务器，并在服务器端使用PHP处理数据后将其插入到MySQL数据库。

首先，你需要一个HTML表单，该表单将包含你的输入字段和一个用于提交表单的按钮。例如：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>无刷新表单提交</title>
  5.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  6.     <script>
  7.         $(document).ready(function() {
  8.             $('#submit-form').click(function(e) {
  9.                 e.preventDefault(); // 阻止表单的默认提交行为

  11.                 // 获取表单数据
  12.                 var name = $('#name').val();
  13.                 var email = $('#email').val();

  15.                 // 使用AJAX提交数据
  16.                 $.ajax({
  17.                     type: 'POST',
  18.                     url: 'insert_data.php', // PHP脚本的URL
  19.                     data: {
  20.                         name: name,
  21.                         email: email
  22.                     },
  23.                     success: function(response) {
  24.                         // 处理服务器响应
  25.                         alert('数据录入成功！');
  26.                         // 可以选择性地更新页面上的某些元素
  27.                     },
  28.                     error: function(xhr, status, error) {
  29.                         // 处理错误
  30.                         alert('数据录入失败: ' + error);
  31.                     }
  32.                 });
  33.             });
  34.         });
  35.     </script>
  36. </head>
  37. <body>
  38.     <form id="myForm">
  39.         <label for="name">姓名:</label>
  40.         <input type="text" id="name" name="name" required><br>

  42.         <label for="email">电子邮件:</label>
  43.         <input type="email" id="email" name="email" required><br>

  45.         <button type="button" id="submit-form">提交</button>
  46.     </form>
  47. </body>
  48. </html>
复制代码

接下来，你需要一个PHP脚本来处理这些数据，并将其插入到MySQL数据库中。这个脚本应该与你在AJAX请求中指定的URL相对应（在这个例子中是insert_data.php）。
  1. <?php
  2. // 数据库连接信息
  3. $host = 'localhost';
  4. $dbname = 'your_database_name';
  5. $username = 'your_username';
  6. $password = 'your_password';

  8. // 创建数据库连接
  9. $conn = new mysqli($host, $username, $password, $dbname);

  11. // 检查连接是否成功
  12. if ($conn->connect_error) {
  13.     die("数据库连接失败: " . $conn->connect_error);
  14. }

  16. // 获取通过POST方法发送的数据
  17. $name = isset($_POST['name']) ? $_POST['name'] : '';
  18. $email = isset($_POST['email']) ? $_POST['email'] : '';

  20. // 准备SQL语句
  21. $sql = "INSERT INTO your_table (name, email) VALUES (?, ?)";

  23. // 准备语句
  24. $stmt = $conn->prepare($sql);

  26. // 绑定参数
  27. $stmt->bind_param("ss", $name, $email); // "ss" 表示两个参数都是字符串

  29. // 执行语句
  30. if ($stmt->execute()) {
  31.     echo "数据录入成功";
  32. } else {
  33.     echo "数据录入失败: " . $conn->error;
  34. }

  36. // 关闭语句和连接
  37. $stmt->close();
  38. $conn->close();
  39. ?>
复制代码

确保你的MySQL表your_table已经创建，并且包含name和email两个字段。

最后，当用户填写表单并点击提交按钮时，JavaScript代码将捕获表单数据，并通过AJAX发送到服务器上的insert_data.php脚本。如果数据成功插入数据库，服务器将返回一个成功的消息，然后JavaScript代码将显示一个警告框来通知用户。整个过程中，页面不会刷新。





欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3