源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 670|回复: 0

[PHP编程] 表单无刷新录入信息到mysql的代码

[复制链接]

3102

主题

3503

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
272470
发表于 2024-4-21 21:25:56 | 显示全部楼层 |阅读模式

为了实现表单无刷新录入信息到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(); // 阻止表单的默认提交行为

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

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

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

  41.         <button type="button" id="submit-form">提交</button>
  42.     </form>
  43. </body>
  44. </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';

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

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

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

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

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

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

  22. // 执行语句
  23. if ($stmt->execute()) {
  24.     echo "数据录入成功";
  25. } else {
  26.     echo "数据录入失败: " . $conn->error;
  27. }

  28. // 关闭语句和连接
  29. $stmt->close();
  30. $conn->close();
  31. ?>
复制代码

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

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

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-5-23 14:50 , Processed in 0.128468 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明