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

Question

I'm working on shopping cart. Now I need to pass the array of objects added into shopping cart which is stored in localStorage to php page in order to insert into database.

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

Above logs out, the following:

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

Now I'm trying to pass this JSON string to a php page called submit_cart.php and retrieve the string in php page correctly, how do I do that? Currently it's sending and receiving empty data.

$("#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 []
                  }
                 });
            });

In submit_cart.php

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

echo json_encode($return["json"]);
  ?>

EDITED as suggested answer and it's working now:

$("#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 []
            }
            });
            });

In submit_cart.php

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

print_r($_POST);
  ?>

Answer 1

On the ajax request set the content type to json and on the php side read the json from 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

Answer 2

Both are wrong if you want to get the values from $_POST . You need to send key-value pairs to the server and then you can access them in $_POST by these keys.

To send everything in 1 variable, you could do something like:

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

Note that sending an object is always a good idea as jQuery will take care of encoding the data correctly when you use an object.

And then you can get it in php like:

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

Answer 3

Your data is already encoded as you mention in your question console.log(localStorage.getItem("shoppingCart"));

output is

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

So in your ajax request

data: { json_data:data} ,

in this case data work as object and it is easy to fetch value.

and in php file

echo $_POST["json_data"];

Answer 4

您不在此处向目标页面发送任何数据。在ajax内部，使用data：参数发送数据。然后在ajax外部使用.done（）函数代替使用success函数，在结果处理方面，done函数更好。您可以使用开发人员工具网络检查数据是否正在传输。显示所有请求和响应数据。希望可以解决此问题。