不要在提交PHP时刷新页面

Do not refresh page on submit PHP

本文关键字：刷新 PHP 提交      更新时间：2023-09-26

我希望当我点击提交按钮时，它不会刷新页面。我的提交按钮仅在提交时调用代码集。但当它被提交时，它会刷新页面，我的变量就会丢失其值。

我知道这可以用java脚本或ajax实现，但这是我还不知道的地方。需要开始学习。我曾尝试在JavaScript中使用其他一些建议，但对我来说不起作用，因为JavaScript代码是为大多数高级表单构建的，而不仅仅是一个提交按钮。

我的按钮：

  <form action='{$_SERVER['PHP_SELF']}' method='post'>
      <input type='submit'  class='submit' name='confirm_points' value='Confirm Points' />
  </form>";

当按下提交按钮时执行的我的代码：

if(isset(&_POST['confirm_points'])) {
    // my code is here
}

感谢您的帮助

这里有一个简单的例子：

<?php
if (isset($_POST['points'])) {
    echo "I'm AJAX and I have " . $_POST['points'];
    exit();
}
?>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(document).ready(function(){
            $('form').submit(function(event){
                event.preventDefault();
                $.ajax({
                    type: $(this).attr('method'),
                    data: $('form').serialize(),
                    success: function(data) {
                        $('#result').html(data);
                    }
                });
            });
        });
    </script>
</head>
<body>
<form method="POST">
    <input type="text" name="points" placeholder="Some data" value="25 points"/>
    <input type='submit'  class='submit' name='confirm_points' value='Confirm Points' />
</form>
<div id="result"></div>
</body>
</html>

包含应由ajax 提交的表单的页面

<html>
    <head></head>
    <body>
        <form id="my-form">
            <input type="text" name="username" /> <br/>
            <input type="submit" value="Save" />
        </form>
        <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script>
            $(function () {
                $('#my-form').submit(function (e) {
                    var $data = $(this).serialize();
                    var $url = 'path_to_processing_script';
                    $.post($url, $data, function ($response, $status ) {
                        if ( $status == 'success' ) {
                             alert($response);
                        }
                    });
                    e.preventDefault();
                });
            });
        </script>
    </body>
</html>

处理脚本

<?php
    var_dump($_POST);
?>

首先要停止刷新，请将表单标题更改为：

<form action='{$_SERVER['PHP_SELF']}' method='post' onsubmit="javascript:return false;" id="myform">

接下来，使用ajax提交表单：

<script src="path/to/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#myform").submit(function(){
        var elem1=$("#elem1").val(); //get values of inputs for validation
        if(elem1.length<5){alert("Length too short!");}//Sample Validation
        else{
            $.ajax({
                url:"verify.php",//link to your submission page
                type:"post", //change to your needs
                data:{"elem1":elem1}, //add all variable
                success:function(response){alert(response);} //Manage Response
            });
    });
});
</script>
相关文章：