如何通过ajax将JSON函数作为数据传递和检索到PHP

How to pass and retrieve JSON function as data via ajax to PHP?

本文关键字:检索 PHP 数据 ajax 何通过 JSON 函数      更新时间:2024-01-23

我正在处理购物车。现在,我需要将添加到购物车中的对象数组(存储在localStorage中)传递到php页面,以便插入数据库。

console.log(localStorage.getItem("shoppingCart"));

以上注销,如下:

[{"name":"Banana","price":1.33,"count":5},{"name":"Apple","price":1.22,"count":5},{"name":"Shoe","price":22.33,"count":1}]

现在我正试图将这个JSON字符串传递到一个名为submit_cart.php的php页面,并在php页面中正确检索字符串,我该如何做到这一点?目前它正在发送和接收空数据。

$("#submit-cart").click(function(event){
                console.log("****TEST LOG ***");
                console.log(localStorage.getItem("shoppingCart"));
                var data = localStorage.getItem("shoppingCart");
                $.ajax({
                  type: "POST",
                  dataType: "json",
                  url: "submit_cart.php",
                  data: data,
                  success: function(data) {
                    console.log("******success******");
                    console.log(data);//this logs []
                  }
                 });
            });

在submit_cart.php 中

<?php
$return = $_POST;
$return["json"] = json_encode($return);
$data = json_decode($return["json"], true);
echo json_encode($return["json"]);
  ?>

按照建议的答案编辑,现在正在运行:

$("#submit-cart").click(function(event){
                console.log("****TEST LOG ***");
                console.log(localStorage.getItem("shoppingCart"));
                var data = localStorage.getItem("shoppingCart");
            $.ajax({
            type: "POST",
            dataType: "json",
            contentType: 'application/json',
            url: "submit_cart.php",
            data: data,
            success: function(data) {
            console.log("******success******");
            console.log(data);//this logs []
            }
            });
            });

在submit_cart.php 中

<?php
$_POST = json_decode(file_get_contents('php://input'),true);
print_r($_POST);
  ?>

在ajax请求中将内容类型设置为json,在php端从php://input

$.ajax({
  type: "POST",
  dataType: "json",
  contentType: 'application/json',
  url: "submit_cart.php",
  data: data,
  success: function(data) {
    console.log("******success******");
    console.log(data);//this logs []
  }
});
$_POST = json_decode(file_get_contents('php://input'),true);
// then use post as usual

如果要从$_POST中获取值,则两者都是错误的。您需要将键值对发送到服务器,然后可以通过这些键在$_POST中访问它们。

要发送1个变量中的所有内容,您可以执行以下操作:

...
var data = {json: localStorage.getItem("shoppingCart")};
...

请注意,发送对象总是一个好主意,因为当您使用对象时,jQuery将负责正确编码数据。

然后你可以在php中获得它,比如:

// you only need this, no additional encoding / decoding
$data = json_decode($_POST["json"], true);

您在问题console.log(localStorage.getItem("shoppingCart")); 中提到的数据已经编码

输出为

[{"name":"Banana","price":1.33,"count":5},{"name":"Apple","price":1.22,"count":5},{"name":"Shoe","price":22.33,"count":1}]

所以在您的ajax请求中

data: { json_data:data} ,

在这种情况下,数据作为对象工作,并且很容易获取值。

和在php文件中

echo $_POST["json_data"];

此处没有向目标页面发送任何数据。在ajax内部发送带有data:parameter的数据。然后不使用成功函数,而是在ajax之外使用.done()函数。done函数在结果处理方面更好。您可以使用开发人员工具网络来检查您的数据是否正在传输。在那里显示了所有的请求和响应数据。希望这能解决问题。