I can not understand why the PHP script does not work when calling $ .ajax

Question

Here is my jQuery script:

$.ajax({ type: 'POST', url: 'zipCodes.php', data: searchZipCode, cache: false, success: function(response) { alert ('response from db search: ' + response); }, error: function(response) { console.log(response); alert('Query failed, PHP  returned this response: ' + response); } }); 

The above script is in the main html tag of the file the form is in. php script is in the same folder as the html file.

Here is the form:

 <form id="frmZipCodeSearch" action=""> <label for="txtZipCodeSearch">Enter a zip code</label> <input type="text" id="txtZipCodeSearch" length="10" maxlength="5" /> <input type="submit" id="btnSubmitZipCodeSearch" /> </form> 

I also confirmed that the value of "searchZipCode" has a value.

Every time I run a search, I get a warning from the ajax call error part that says

Request error, php script returned this response: [object Object]

and this is displayed in the console:

Object {readyState: 0, setRequestHeader: function, getAllResponseHeaders: function, getResponseHeader: function, overrideMimeType: function ...}

I tried to strip the php script right down to the echo. I am not getting php error logs generated in a folder with a script on the server. None of me seem to give me another result. With one exception:

The only time I had a different result was that I removed ajax and moved the php script to a file with the form and made the "normal" html form POST method. It worked. But I don’t think the path is wrong when php is a different file, because I don’t get the “file not found” in the console.

What the hell is missing here?

[Additional Information] In response to hek2mgl's answer, I added xhr in the error response and received additional information in the console:

 Uncaught ReferenceError: xhr is not defined zipCodeSearch.html:57 $.ajax.error zipCodeSearch.html:57 l jquery-1.8.3.min.js:2 c.fireWith jquery-1.8.3.min.js:2 T jquery-1.8.3.min.js:2 r jquery-1.8.3.min.js:2 

All the other jQuery that I use work fine, but this is the first time I have used v1.8.3 myself.

[The answer is hek2mgl credit] As hek2mgl explained in our crazy discussion, I submitted the form twice because the ajax call was in the form button click event.

The fix was to move the ajax call from the click event to its own function, and after checking on the client side, call the ajax function and add "return false"; after calling the function.

Answer 1

The $ .ajax error callback is defined as follows:

Type: Function (jqXHR jqXHR, String textStatus, String errorThrown)

You have dropped the entire jqXHR object. Unlike the success function, the processed text itself is not an error callback parameter. To get the response text (if any), use this:

 error: function(xhr) { var response = xhr.responseText; console.log(response); var statusMessage = xhr.status + ' ' + xhr.statusText; var message = 'Query failed, PHP  returned this status: '; var message = message + statusMessage + ' response: ' + response; alert(message); }