Question

我试图弄清楚如何使我的表单提交将所需字段的结果加载到现有页面中，而不是刷新，因此我要进行这一段。

<form action="post.php" method="post">
    <div class="form-group">
        <select class="form-control" id="inputState" name="inputState" style="width: 100%">
            <option selected>
                Choose...
            </option>
            <option value="account">
                The Accounts
            </option>
            <option value="cape">
                The Capes
            </option>
        </select>
     </div><input type="submit">
</form>

以上代码除了可以打开新的URL之外，还可以正常工作，我想知道提交表单后如何在同一页面上加载此php。

print $our_submit = $_POST["inputState"];

我已经查看了所有与AJAX相关的帖子，但以我的示例为例，我什么都没做。

Answer 1

尝试下面的代码，并删除操作名称，例如action =“”

if(isset($_POST["inputState"])){
 $our_submit = $_POST["inputState"];
 print_r($our_submit);
}

Answer 2

采用action =“ <?php echo $_SERVER['PHP_SELF'];?>”

之类的表单操作

if(isset($_POST["inputState"])){
 $our_submit = $_POST["inputState"];
 print_r($our_submit);
}

尝试提交即可获取表单数据

Answer 3

如果您不想在提交表单后刷新页面，则无需使用AJAX发送日期。

简单的方法是使用Jquery

尝试此代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="post.php" method="post">
        <div class="form-group">
            <select class="form-control" id="inputState" name="inputState" style="width: 100%">
                <option selected>
                    Choose...
                </option>
                <option value="account">
                    The Accounts
                </option>
                <option value="cape">
                    The Capes
                </option>
            </select>
         </div>
         <input type="submit" class="send-data">
    </form>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function() {
            $('.send-data').click(function(e) {
                e.preventDefault();
                var url = $('form').attr('action');
                var data = {
                    'inputState' : $('#inputState').val()
                };

                if (data.inputState != '') {
                    $.post(url, data, function(Response) {
                        // Work if your response here
                        console.log(Response);
                    });
                }
            });
        });
    </script>
</body>
</html>

PHP代码

<?php
    if (isset($_POST['inputState']) && !empty($_POST['inputState'])) {
        echo $_POST['inputState'];
        return true;
    }

    echo 'Please Choose a state ...';
?>

使页面上的表单提交运行结果，而不是刷新

3 个答案: