method to move multiple variables (array?) from jquery to PHP

I was chasing after JSON as a method to do this, but I'm wondering if I should have been looking in a different direction. I'll tackle this as simply as possible.

Jquery from "page1.php"

$(".button").click(function() {

       var name = "Jeremy";
       var car = "Saturn";
     开发者_如何学运维  var color = "blue";
       var state = "Mississippi";
// I need all four of these to get passed over to PHP in the following ajax

          $.ajax({
            url: "page2.php",
            //dataType: '???????',
            type: 'POST',
            data: 'mydata=' + ????????,

                success: function(result) {
                alert(result);

                }
            });

      });

So there are four jquery variables that I've fudged. Now I need to hand them over to page2.php for my backend PHP. Here is page2.php

if (filter_has_var(INPUT_POST, "mydata")) {

    $mydata = mysql_real_escape_string(filter_input(INPUT_POST,'mydata'));

// Here I need to turn these into variables, or just an array and then throw them into my SQL

mysql_query("INSERT INTO mysqldata (namefield, carfield, colorfield, statefield)
            VALUES ($name, $car, $color, $state)"); 

$sqlresult = mysql_insert_id;

if ($sqlresult != '') {
   echo "SQL successfully updated.";
}

}

Thus, my question is: What is the most effective method to pass the data to PHP, in this case?

There's probably a simple answer here that I just don't know. Can I turn those jquery variables into an array and hand them to PHP that way? Is JSON still the best way to go, and I just need to know how to convert it on the back end?

As an array

var mydata = [name, car, color, state];

Or as an object

var mydata = { 'name' : name, 'car' : car, 'color' : color, 'state' : state };

-

$.ajax({
  ...
  data: mydata
  ...

JavaScript/jQuery

$(".button").click(function() {

    // create the data object
    var myData = {
        name : 'Jeremy',
        car : 'Saturn',
        color: 'blue',
        state: 'Mississippi'
    };

    $.ajax({
        url: "page2.php",
        //dataType: '???????',
        type: 'POST',
        data: myData,
        success: function(result) {
            alert(result);
        }
    });
});

PHP

// check if the name has been posted, which means we have a submission to process
if(isset($_POST['name'])){
    $query = sprintf("INSERT INTO mysqldata (namefield, carfield, colorfield, statefield) VALUES ('%s', '%s', '%s', '%s')",
                mysql_real_escape_string($_POST['name']), // clean malicious code
                mysql_real_escape_string($_POST['car']), // from user input
                mysql_real_escape_string($_POST['color']), // to protect against
                mysql_real_escape_string($_POST['state'])); // SQL injection

    // run the query
    $result = mysql_query($query);

    // check if the insert was done successfully
    if($result){
        echo 'SQL successfully updated.';
    }
}

If you notice, based on the id we used on the javascript object to assign the data, we are accessing it in the $_POST array. E.g.

The name

var myData = {
        name : 'Jeremy',
        ...
}

Will be access on PHP side with

$_POST['name']

Hope this blog posts helps you..

http://www.factsandpeople.com/facts-mainmenu-5/26-html-and-javascript/89-jquery-ajax-json-and-php

It focuses on using json_decode method to decode the json