Question

我想实现这一点，当我点击提交按钮时，它不会刷新页面。我的提交按钮仅在提交时调用代码集。但是当它被提交时，它会刷新页面，我的变量会失去它的值。

我知道这可以用java-script或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
}

感谢您的帮助

Answer 1

这是一个简单的例子：

<?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>

Answer 2

带有应由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);
?>

Answer 3

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

<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>

请勿在提交PHP时刷新页面

3 个答案: