XAMPP本地环境下表单提交后如何原页面显示提示且不跳转？

要实现表单提交后不跳转页面，在原页面显示提示信息，需要使用**异步请求（AJAX）**替代传统表单提交方式。以下是具体修改步骤：

1. 修改HTML表单与添加JavaScript逻辑 #

移除表单的action属性，通过原生JS阻止默认跳转行为，异步发送表单数据并接收服务器返回的提示信息：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Form site</title>
</head>
<body>
    <form id="myForm" method="post">
        Cnic: <input type="number" name="cnic_number"><br><br>
        Name: <input type="text" name="name"><br><br>
        FIR No: <input type="text" name="fir_no"><br><br>
        FIR Date: <input type="date" name="fir_date"><br><br>
        Section: <input type="text" name="section"><br><br>
        Police Station: <input type="text" name="police_station"><br><br>
        Address: <textarea name="address"></textarea><br><br>

        <input type="submit" value="Submit">
    </form>
    <div id="message"></div>

    <script>
        const form = document.getElementById('myForm');
        const messageDiv = document.getElementById('message');

        form.addEventListener('submit', function(e) {
            // 阻止表单默认跳转
            e.preventDefault();
            // 收集表单所有数据
            const formData = new FormData(this);

            // 发送异步POST请求
            fetch('connect.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(data => {
                // 在原页面显示服务器返回的提示
                messageDiv.textContent = data;
                // 可选：提交成功后清空表单
                form.reset();
            })
            .catch(error => {
                messageDiv.textContent = '提交失败：' + error;
            });
        });
    </script>
</body>
</html>

2. 优化PHP处理脚本（connect.php） #

保留原有功能，同时使用预处理语句修复SQL注入风险，确保返回纯文本提示信息：

<?php
$name = filter_input(INPUT_POST, 'name');
$cnic_number = filter_input(INPUT_POST, 'cnic_number');
$fir_no = filter_input(INPUT_POST, 'fir_no');
$fir_date = filter_input(INPUT_POST, 'fir_date');
$section = filter_input(INPUT_POST, 'section');
$police_station = filter_input(INPUT_POST, 'police_station');
$address = filter_input(INPUT_POST, 'address');

if (!empty($name) && !empty($cnic_number)) {
    $host = "localhost";
    $dbusername = "root";
    $dbpassword = "";
    $dbname = "mysite2";

    $conn = new mysqli($host, $dbusername, $dbpassword, $dbname);
    if (mysqli_connect_error()) {
        die('连接错误 (' . mysqli_connect_errno() . ') ' . mysqli_connect_error());
    } else {
        // 预处理语句防止SQL注入
        $sql = "INSERT INTO mysite2table (name, cnic_number, fir_no, fir_date, section, police_station, address)
                VALUES (?, ?, ?, ?, ?, ?, ?)";
        
        $stmt = $conn->prepare($sql);
        $stmt->bind_param("sisssss", $name, $cnic_number, $fir_no, $fir_date, $section, $police_station, $address);

        if ($stmt->execute()) {
            echo "New record is inserted successfully";
        } else {
            echo "错误: " . $stmt->error;
        }
        $stmt->close();
        $conn->close();
    }
} else {
    echo "cnic number and name should not be empty";
}
?>

核心说明 #

• e.preventDefault()是阻止页面跳转的关键，它取消了表单的默认提交行为。
• FormData对象自动收集表单所有字段，无需手动拼接参数。
• 预处理语句能有效避免SQL注入漏洞，提升代码安全性。

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