用PHP 写一个POST提交的案例，前端用 bootstrap 写一个输入框，两个多行输入框，一个情况按钮，一个提交按钮，点击提交按钮，POST数据，并返回弹窗提交成功，PHP文件定义为set.php

发布于 2024-02-19 14:28:18

以下是一个使用PHP和Bootstrap实现POST提交的案例，前端包含一个输入框、两个多行输入框、一个清空按钮和一个提交按钮。点击提交按钮后，通过POST方式将数据发送到set.php文件，并在提交成功后弹窗提示。

index.html：

<!DOCTYPE html>
<html>
<head>
    <title>POST提交案例</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h2>POST提交案例</h2>
        <form id="myForm">
            <div class="mb-3">
                <label for="name" class="form-label">姓名</label>
                <input type="text" class="form-control" id="name" name="name">
            </div>
            <div class="mb-3">
                <label for="message1" class="form-label">留言1</label>
                <textarea class="form-control" id="message1" name="message1" rows="3"></textarea>
            </div>
            <div class="mb-3">
                <label for="message2" class="form-label">留言2</label>
                <textarea class="form-control" id="message2" name="message2" rows="3"></textarea>
            </div>
            <button type="button" class="btn btn-primary" onclick="submitForm()">提交</button>
            <button type="button" class="btn btn-secondary" onclick="clearForm()">清空</button>
        </form>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        function submitForm() {
            $.ajax({
                url: "set.php",
                type: "POST",
                data: $("#myForm").serialize(),
                success: function(response) {
                    alert("提交成功");
                    // 清空表单
                    clearForm();
                },
                error: function(error) {
                    alert("提交失败");
                }
            });
        }

        function clearForm() {
            $("#myForm")[0].reset();
        }
    </script>
</body>
</html>

set.php：

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 获取POST提交的数据
    $name = $_POST["name"];
    $message1 = $_POST["message1"];
    $message2 = $_POST["message2"];

    // 在这里可以对数据进行处理，如存入数据库等

    // 返回成功响应
    echo "success";
}

?>

在浏览器中打开index.html文件，填写表单内容后点击提交按钮即可实现POST提交并在提交成功后弹窗提示。请将set.php文件与index.html放在同一目录下，并确保服务器环境支持PHP。