Simple jQuery / Ajax error - ajax

Question

I have this code:
var custID = 1;
$.ajax({
url: 'php/viewCustomer.php',
type: 'GET',
data: '{custID: ' + custID + '}',
dataType: 'json',
cache: false,
beforeSend: function () {
$('#display').append('<div id="loader"> Lodaing ... </div>');
},
complete: function () {
$('#loader').remove();
},
success: function (data) {
//do something
},
error: function () {
alert('could not process');
}
});
there is an error and alerts the error message could not process, so I tried to debug it like this:
var custID = 1;
$.ajax({
url: 'php/viewCustomer.php',
type: 'GET',
data: '{custID: ' + custID + '}',
dataType: 'json',
cache: false,
beforeSend: function () {
$('#display').append('<div id="loader"> Lodaing ... </div>');
},
complete: function () {
$('#loader').remove();
},
success: function (data) {
//do something
},
error: function (jqXHR) {
alert('Error: ' + jqXHR.status + jqXHR.statusText);
}
});
which outputs:
200 OK
so if it is ok, why on earth is it executing the error: function. Confused, please help.

Answer 1

Your data string is incorrectly formatted, if you are intending it to be a JSON object. There was a previous question about this: Jquery passing data to ajax function
Instead, try:
data: JSON.stringify({custID: custID}),
The format is (key):(variable). My previous answer have placed quotes around the variable, which is not necessary.