使用 jQuery Ajax 将数据发布到另一个 php 文件 [重复]答案

【问题标题】：Posting data using jQuery Ajax to another php file [duplicate]使用 jQuery Ajax 将数据发布到另一个 php 文件 [重复]
【发布时间】：2020-12-29 16:04:49
【问题描述】：

我有两个 PHP 页面。在其中一个页面上，我想在按下按钮时将数据发布到另一个页面。但是，当我尝试从其他页面访问 post 数组时，它显示为空。如果有人能告诉我哪里出错了，我将不胜感激。（另外我不能用html表单发帖）

页面调用 test2.php:

<?php
    if(isset($_POST['testing1'])){
        die(json_encode($_POST));
    } 
?> 
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylsheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<button id="testbtn" onclick="location.href='test1.php'">Test Button</button>
<script>
    $(document).ready(function(){
        $('#testbtn').click(function() {
            $.ajax({
                method: 'POST',
                url: 'test1.php',
                data: {
                    testing1: 'string1',
                    testing2: '111'
                },
                success: function(data){
                    alert(data);
                    output = JSON.parse(data);
                }
            });
        });
    });
</script>
</body>
</html>

名为 test1.php 的页面：

<?php
    $testvar = json_encode($_POST);
    echo $testvar;
?> 
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylsheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
</body>
</html>

【问题讨论】：

stackoverflow.com/questions/16432685/… 可以帮到你吗？
试试json_encode($_REQUEST);
您正在尝试将响应解析为 json，即使您似乎也在返回 HTML。这将使JSON.parse() 失败（并在控制台中抛出错误）。
@Sintuz - 该链接在这里并不真正相关，因为 OP 只是试图将一些数据发布到另一个页面，而该链接是将其传递到多个页面。
可能想删除onclick="location.href='test1.php'"，因为onclick= 在$("#testbtn").click 之前触发 - 所以它甚至没有尝试 ajax（你可以通过使用浏览器的调试来确认这一点）。您只是在没有 POST 的情况下打开第二页，因此没有 POST 数据。

标签： php jquery json ajax post

【解决方案1】：

它失败的原因是因为你在 test1.php 上有太多的 html

alert(data) 有问题，因为内容太多。 JSON.parse(data) 失败了，因为它不仅仅是 json 它也是 html

test1.php 应该只是简单地将 post 解析为 json 并回显它

<?php
    echo json_encode($_POST);
?>

【讨论】：

alert(huge text) 不会失败，它会截断文本尝试：alert($("body").html())
另外“当我尝试从另一个页面访问帖子数组时，它显示为空” - 所以 OP 甚至没有到达 success: 回调。但最后一部分是让事情顺利进行的第一步的好主意。

【解决方案2】：

当你按下按钮时，两件事同时发生：

将数据发送到页面test1.php的ajax调用
由于按钮的 onClick 属性导致的页面重定向。

ajax 请求调用页面test1.php，该页面与您使用onClick 属性时调用的页面不同。所以我认为你可以尝试将“location.href = 'test1.php'”放在成功函数中，并将 $_POST 存储在会话变量中。这样，数据将在您重定向之前到达 test1.php 页面。

success: function(data){
    alert(data);
    output = JSON.parse(data);
    location.href = 'test1.php';
}

【讨论】：

【解决方案3】：

可能是这样的：

页面调用 test2.php:

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylsheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<button id="testbtn" onclick="location.href='test1.php'">Test Button</button>
<script>
    $(document).ready(function(){
        $('#testbtn').click(function() {
            $.ajax({
                method: 'POST',
                url: 'test1.php',
                data: "yourData="+"{
                    testing1: 'string1',
                    testing2: '111'
                }",
        dataType:"json",
                success: function(data){
                    alert(data);
                    output = JSON.parse(data);
                }
            });
        });
    });
</script>
</body>
</html>

名为 test1.php 的页面：

<?php
    if(isset($_POST["yourData"]){
      $testvar = json_decode($_POST["yourData"]);
      echo $testvar->testing1."<br/>";
      echo $testvar->testing2;
    }else{
      echo"is not set";
    }
    if(!empty($_POST["yourData"]){echo $_POST["yourData"];}else{echo"is empty";}
?> 
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylsheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
</body>
</html>

注意：

dataType:"json" 如果您想获得 json 答案，请使用；
如果您使用dataType:"json"，则意味着您必须将我的代码中的json_decode() 方法更改为json_encode()；
isset()检查关联数组的名称是否存在；
! 表示没有；
empty() 检查关联数组中该名称的值是否为空（如' '）；
!empty() 检查关联数组中该名称的值是否不为空（不像''）。

【讨论】：