Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Testing</title>
    <!-- Jquery Library -->
    <script `enter code here`src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

    <form action="" method="post" id="itemsPag">
        <div class="form-group">
           <label for="items-per-page">Items Per Page</label>
            <select name="num-items" id="items-per-page" class="form-control">
                <?php for($i = 5 ; $i < 55 ; $i+=5): ?>
                    <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                <?php endfor; ?>
            </select>
            <input type="submit" name="submit">
         </div> 
    </form>     

<script>        

        $( document ).ready( function() {           
            $('#itemsPag').on('submit',function (e) {

            $.ajax({
                    type: 'post',
                    url: '',
                    data: $(this).serialize(),
                    success: function (data) {                      
                        console.log(data);
                    }
                });
            e.preventDefault();     
            });         
});

</script>
    <?php echo (isset($_POST['num-items'])) ? $_POST['num-items'] : "NO WORKING"; ?>
</body>
</html>

嗨小伙子，

有人可以帮帮我吗？我知道它的评论，但我很期待一个没有快乐的解决方案。

我试图在同一页面中捕获/显示从Ajax到PHP的表单中的数据但是它没有按照我的预期工作。

它使用console.log但不在页面本身。在console.log上显示整个html文档，底部的PHP正在缓存数据。有任何想法吗？。请参阅上面的代码。

由于

Answer 1

您的代码正常运行！但是，您必须将PHP放在HTML之前并停止脚本（或在另一个脚本中 - 查看下面的注释）。

当您发布表单时，PHP脚本将回显$_POST['num-items']并停止执行以返回Javascript。

提交表单后查看您的控制台，您只需提交值。

<?php 
   // Here the code is before the HTML, but your can put it in 
   // another script (and be sure that the url parameter of 
   // your jQuery.ajax() point on it).
   if (isset($_POST['num-items'])) {
      echo $_POST['num-items'] ;
      exit; // stop the script to avoid to return the HTML to 
      // your Javascript.
   }
?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Testing</title>
    <!-- Jquery Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

    <form action="" method="post" id="itemsPag">
        <div class="form-group">
           <label for="items-per-page">Items Per Page</label>
            <select name="num-items" id="items-per-page" class="form-control">
                <?php for($i = 5 ; $i < 55 ; $i+=5): ?>
                    <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                <?php endfor; ?>
            </select>
            <input type="submit" name="submit">
         </div> 
    </form>     

    <script type="text/javascript">        

        $( document ).ready( function() {           
            $('#itemsPag').on('submit',function (e) {

            $.ajax({
                    type: 'post',
                    url: '',
                    data: $(this).serialize(),
                    success: function (data) {                      
                        console.log(data); // Now, here you will have only the PHP block.
                    }
                });
            e.preventDefault();     
            });         
       });

    </script>
</body>
</html>

将变量Ajax传递给PHP同一页面

1 个答案: