同一页面上的 Ajax 到 PHP答案

【问题标题】：Ajax to PHP on the same page同一页面上的 Ajax 到 PHP
【发布时间】：2015-05-17 01:48:23
【问题描述】：

我正在尝试将变量发送到进行 AJAX 调用的同一页面。

只有当我分离 PHP 脚本（例如 process.php 并相应地更改 AJAX url）时，我才会收到成功的结果。

index.php

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(function() { 
        $('form').submit(function(e) { 
            e.preventDefault();
            $.ajax({
                type        : 'POST',
                url         : 'index.php',
                data        : $(this).serialize(),
                dataType    : 'json',
                encode      : true
            })
            .done(function(data) {
                $('#result').html(data);    
            })
        });
    }); 
</script>
</head>

<body>
<?php
    $data = array();
    if(isset($_POST['name'])) {
        $data = 'You entered: ' . $_POST['name'];       
        echo json_encode($data);        
    }
?>
    <form>
        <input type="text" name="name">
        <input type="submit" value="Submit">
    </form>

    <div id="result"></div>
</body>

同一页面是否可以捕获和处理我们使用 AJAX 传递的变量？

【问题讨论】：

标签： php jquery ajax

【解决方案1】：

您在 AJAX 设置中设置了 dataType : json，因此您应该使用 echo json object 而不是字符串 (HTML)。
使用 exit() 而不是 echo，并将您的 PHP 放在页面顶部。这样在您检查 $_POST['name'] 是否存在之前不会回显 HTML。

另一件事是您的$data = array() 在该行被转换为字符串：

$data = 'You entered:' . $_POST['name'];

应该是$data[] = ...

<?php
    $data = array();
    if(isset($_POST['name'])) {
        $data[] = 'You entered:' . $_POST['name'];
        exit(json_encode($data));       
    }
?>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
    $(function() { 
        $('form').submit(function(e) { 
            e.preventDefault();
            $.ajax({
                type        : 'POST',
                url         : 'index.php',
                data        : $(this).serialize(),
                dataType    : 'json',
                encode      : true
            })
            .done(function(data) {
                $('#result').html(data);    
            })
        });
    }); 
</script>
</head>

<body>
    <form>
        <input type="text" name="name">
        <input type="submit" value="Submit">
    </form>
    <div id="result"></div>
</body>

【讨论】：

【解决方案2】：

添加模具（）；函数并使用 $_SERVER['HTTP_X_REQUESTED_WITH'] 来检测 ajax 请求。还把 serialize() 放在 ajax 函数之外来获取数据

   var data = '';
   $(function() { 
    $('form').submit(function(e) { 
        e.preventDefault();
        data = $(this).serialize();
        $.ajax({
            type        : 'POST',
            url         : 'index.php',
            data        :  data,
            dataType    : 'json',
            encode      : true
        })
        .done(function(data) {
            $('#result').html(data);    
        })
    });
}); 


<?php

  $data = array();
  if(isset($_POST['name']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH'])) {
    $data = 'You entered: ' . $_POST['name'];       
    echo json_encode($data);  
    die();      
  }
?>

【讨论】：

@blsn 检查我的更新答案.. 如果使用 POST 不起作用，请尝试使用 get 方法
感谢上次更新...这也不好用。
你得到的回应。 ??