ajax-将数据作为json发送到php服务器并接收响应

Question

I'm trying to grasp more than I should at once.

Let's say I have 2 inputs and a button, and on button click I want to create a json containing the data from those inputs and send it to the server.

I think this should do it, but I might be wrong as I've seen a lot of different (poorly explained) methods of doing something similar.

    var Item = function(First, Second) {
        return {
            FirstPart : First.val(), 
            SecondPart : Second.val(), 
        };
    };

    $(document).ready(function(){
        $("#send_item").click(function() {
            var form = $("#add_item");

            if (form) {
                item = Item($("#first"), $("#second"));

                $.ajax ({
                    type: "POST",
                    url: "post.php", 
                    data: { 'test' : item },
                    success: function(result) {
                        console.log(result);
                    }
                });
            }
        });
    });

In PHP I have

class ClientData
{
    public $First;
    public $Second;

    public function __construct($F, $S)
    {
        $this->First = F;
        $this->Second = S;
    }
}

if (isset($_POST['test']))
{
    // do stuff, get an object of type ClientData
}

The problem is that $_POST['test'] appears to be an array (if I pass it to json_decode I get an error that says it is an array and if I iterate it using foreach I get the values that I expect to see). Is that ajax call correct? Is there something else I should do in the PHP bit?

Answer 1

You should specify a content type of json and use JSON.stringify() to format the data payload.

$.ajax ({
   type: "POST",
   url: "post.php", 
   data: JSON.stringify({ test: item }),
   contentType: "application/json; charset=utf-8",
   success: function(result) {
      console.log(result);
   }
});

Answer 2

When sending an AJAX request you need to send valid JSON. You can send an array, but you need form valid JSON before you send your data to the server. So in your JavaScript code form valid JSON and send that data to your endpoint.

In your case the test key holds a value containing a JavaScript object with two attributes. JSON is key value coding in string format, your PHP script does not not how to handle JavaScript (jQuery) objects.

https://jsfiddle.net/s1hkkws1/15/

This should help out.

Answer 3

For sending raw form data:
js part:

$.ajax ({
    type: "POST",
    url: "post.php", 
    data: item ,
    success: function(result) {
        console.log(result);
    }
});

php part:

..
if (isset($_POST['FirstPart']) && isset($_POST['SecondPart']))
{
    $fpart = $_POST['FirstPart'];
    $spart = $_POST['SecondPart'];
    $obj = new ClientData($fpart, $spart);
}
...

---

For sending json string:
js part:

$.ajax ({
    type: "POST",
    url: "post.php", 
    data: {'test': JSON.stringify(item)},
    success: function(result) {
        console.log(result);
    }
});

php part:

..

if (isset($_POST['test']))
{
    $json_data = $_POST['test'];
    $json_arr = json_decode($json_data, true);
    $fpart = $json_arr['FirstPart'];
    $spart = $json_arr['SecondPart'];
    $obj = new ClientData($fpart, $spart);
}
...

Answer 4

Try send in ajax:

data: { 'test': JSON.stringify(item) },

instead:

data: { 'test' : item },