[分享]揭秘JS点击提交，轻松实现与PHP数据库的完美对接

引言在Web开发中，JavaScript（JS）和PHP是两种常用的编程语言，分别用于前端和后端开发。将JS与PHP数据库对接，可以实现用户在前端提交数据，后端处理并存储到数据库的功能。本文将详细介绍...

引言

在Web开发中，JavaScript（JS）和PHP是两种常用的编程语言，分别用于前端和后端开发。将JS与PHP数据库对接，可以实现用户在前端提交数据，后端处理并存储到数据库的功能。本文将详细介绍如何通过JS点击提交，实现与PHP数据库的完美对接。

1. 环境准备

在开始之前，请确保以下环境已经搭建好：

• 前端：HTML、CSS、JavaScript
• 后端：PHP、MySQL数据库

2. 前端实现

2.1 HTML表单

首先，创建一个HTML表单，用于收集用户输入的数据。

<form id="myForm"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <label for="email">邮箱：</label> <input type="email" id="email" name="email" required> <button type="button" onclick="submitData()">提交</button>
</form>

2.2 JavaScript代码

接下来，编写JavaScript代码，用于处理表单提交事件，并将数据发送到后端。

function submitData() { var username = document.getElementById('username').value; var email = document.getElementById('email').value; var xhr = new XMLHttpRequest(); xhr.open('POST', 'submit.php', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { alert('数据提交成功！'); } }; xhr.send('username=' + encodeURIComponent(username) + '&email=' + encodeURIComponent(email));
}

3. 后端实现

3.1 PHP代码

在后端，创建一个名为submit.php的文件，用于接收前端发送的数据，并将其存储到MySQL数据库中。

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myDB";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) { die("连接失败: " . $conn->connect_error);
}
$username = $_POST['username'];
$email = $_POST['email'];
$sql = "INSERT INTO users (username, email) VALUES ('$username', '$email')";
if ($conn->query($sql) === TRUE) { echo "新记录插入成功";
} else { echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>

3.2 MySQL数据库

创建一个名为myDB的数据库，并在其中创建一个名为users的表，用于存储用户数据。

CREATE DATABASE myDB;
USE myDB;
CREATE TABLE users ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, username VARCHAR(30) NOT NULL, email VARCHAR(50) NOT NULL
);

4. 总结

通过以上步骤，您已经成功实现了JS点击提交，并实现了与PHP数据库的完美对接。在实际开发中，您可以根据需求对代码进行调整和优化。希望本文对您有所帮助！