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

Posted

技术标签:

【中文标题】使用 jQuery Ajax 将数据发布到另一个 php 文件 [重复]【英文标题】：Posting data using jQuery Ajax to another php file [duplicate] 【发布时间】：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>

【问题讨论】：

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

【讨论】：

以上是关于使用 jQuery Ajax 将数据发布到另一个 php 文件 [重复]的主要内容，如果未能解决你的问题，请参考以下文章

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

如何使用 jquery ajax 将选中复选框的值发送到另一个页面

提交ajax表单并使用jquery重定向到另一个页面

通过jQuery ajax调用将值列表传递给django视图

jQuery.ajax 从 dateRangeSlider 中的 userValuesChanged 调用了两次

jQuery 将 Ajax 调用中的数据传递给 MVC 操作方法