点击按钮时如何使用Ajax异步执行PHP脚本？

兄弟，我完全懂这种卡了十几个小时的崩溃感！刚接触PHP和JS的时候，异步提交这种事儿确实容易绕晕，别自责，这一点都不蠢～我给你整理一套完整的步骤和代码，你跟着来应该就能搞定了：

1. 先写你的index.php表单部分 #

首先把HTML表单搭好，注意别用表单的默认提交逻辑（不然会强制刷新页面），给按钮加个自定义点击事件：

<!DOCTYPE html>
<html>
<head>
    <title>异步提交表单</title>
</head>
<body>
    <!-- 用来显示提交结果的区域 -->
    <div id="feedback" style="margin:10px 0; padding:10px; border-radius:4px;"></div>
    
    <form id="myForm">
        <input type="text" name="username" placeholder="请输入用户名" required>
        <br><br>
        <input type="email" name="email" placeholder="请输入邮箱" required>
        <br><br>
        <!-- 这里一定要用type="button"，避免触发默认提交 -->
        <button type="button" id="submitBtn">提交数据</button>
    </form>

    <script>
        // 后面写JS异步提交逻辑
    </script>
</body>
</html>

2. 编写JS异步提交代码 #

在上面的<script>标签里，用fetch发送数据（这是现在最常用的异步请求方法，比老的XMLHttpRequest简单直观）：

document.getElementById('submitBtn').addEventListener('click', function() {
    // 获取表单数据
    const form = document.getElementById('myForm');
    const formData = new FormData(form);
    const feedbackBox = document.getElementById('feedback');

    // 发送异步请求到处理插入的PHP文件
    fetch('insert.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(result => {
        // 把结果显示在页面上
        feedbackBox.textContent = result;
        feedbackBox.style.backgroundColor = '#d4edda'; // 成功提示的绿色背景
        // 清空表单
        form.reset();
    })
    .catch(error => {
        feedbackBox.textContent = '提交出错了：' + error;
        feedbackBox.style.backgroundColor = '#f8d7da'; // 错误提示的红色背景
    });
});

3. 编写处理插入的insert.php文件 #

这个文件负责接收JS发来的数据，连接MySQL并完成插入操作，最后返回结果：

<?php
// 改成你自己的数据库连接信息
$dbHost = 'localhost';
$dbUser = '你的数据库用户名';
$dbPass = '你的数据库密码';
$dbName = '你的数据库名';

// 创建数据库连接
$conn = new mysqli($dbHost, $dbUser, $dbPass, $dbName);

// 检查连接是否成功
if ($conn->connect_error) {
    die('数据库连接失败：' . $conn->connect_error);
}

// 获取表单提交的参数
$username = $_POST['username'];
$email = $_POST['email'];

// 一定要用预处理语句！防止SQL注入，这是新手最容易忽略的安全点
$stmt = $conn->prepare("INSERT INTO 你的表名 (username, email) VALUES (?, ?)");
// "ss"表示两个参数都是字符串类型
$stmt->bind_param("ss", $username, $email);

// 执行插入操作并返回结果
if ($stmt->execute()) {
    echo '数据插入成功！';
} else {
    echo '插入失败：' . $stmt->error;
}

// 关闭连接和语句
$stmt->close();
$conn->close();
?>

几个必须注意的关键点 #

• 按钮的type必须是button，如果用submit会触发浏览器默认的表单提交，直接跳过你的JS异步逻辑！
• PHP里一定要用预处理语句，绝对不能直接把变量拼进SQL里，不然会有严重的安全问题
• 确保你的数据库里已经创建了对应的表，比如表名可以叫users，字段包含username（varchar类型）和email（varchar类型）
• 本地服务器要正常运行（比如XAMPP/WAMP），PHP和MySQL服务都要开启，文件要放在服务器的根目录（比如XAMPP的htdocs文件夹）

要是还没搞定，你可以打开浏览器的控制台（按F12），里面会显示JS的错误信息，或者PHP的报错内容，能帮你快速定位问题～

内容的提问来源于stack exchange，提问作者renat2