jQuery ajax返回undefined

Question

I am trying to return a row from my database where the id sent via jquery to the php matches a field value. I am getting back undefined and can't seem to work my way out of it.

My jquery:

function renderPreview( event ) {
    target = event.target.id;

    console.log(target) // should say the id name

            $('#results').removeClass();
            $('#results').addClass(target).html( $('#textInput').val() );
            $('html, body').animate({ scrollTop: 600}, "slow");

    console.log('start ajax')

    $.ajax({
        url: '../test.php',
        type: 'POST',
        data: [{'class' : target}],
        dataType: 'json',
        success: function(data) {
            var id = data[0];
            var name = data[1];
            var style = data[2];
            $('#codeTest').html("<b>id: </b><br />"+id+"<br /><b> name: </b><br />"+name+"<br /><b> style: </b><br />"+style);
        }
    });
};

PHP:

$dbstylename = $_POST['class'];
$result = mysql_query("SELECT * FROM style where stylename like '$dbstylename'");
$array = mysql_fetch_row($result);

echo json_encode($array);

mysql_close($con);
?>

Also is there a line of code I can put in my jquery or php to see what query is going through in my chrome developer console?...like the console.logs I already have.

Answer 1

The problem is that you are not sending the data in the correct way. jQuery is passing the value you assign to the data: property to jQuery.param. This function converts the data to a proper query string.

But if you pass an array instead of an object, .param expects it to be an array of objects, where each of the objects has a name and value property.

You can see what jQuery generates in your case by calling .param directly:

> jQuery.param([{'class' : target}])
  "undefined=undefined"

You get the correct query string, if you pass either

[{name: 'class', value: target}]

or

{'class': target}

Both generate:

"class=<whatever the value of target is>"