これが私のjQueryスクリプトです:
$.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 script returned this response: ' + response);
}
});
上記のスクリプトは、フォームがある html ファイルの head タグにあります。php スクリプトは、html ファイルと同じフォルダーにあります。
フォームは次のとおりです。
<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>
「searchZipCode」に値があることも確認しました。
検索を実行するたびに、ajax 呼び出しのエラー部分からアラートが表示されます。
クエリが失敗しました。php スクリプトが次の応答を返しました: [object Object]
これはコンソールに表示されます:
オブジェクト {readyState: 0、setRequestHeader: 関数、getAllResponseHeaders: 関数、getResponseHeader: 関数、overrideMimeType: 関数…}
私はphpスクリプトをエコーだけに落としてみました。サーバー上のスクリプトを含むフォルダーで生成されたphpエラーログを取得していません。私が変更したことは、私に別の結果をもたらすようには見えません。1 つの例外を除いて:
別の結果が得られたのは、ajax を取り除き、php スクリプトをフォームを含むファイルに移動し、「通常の」html フォーム POST メソッドを実行したときだけでした。それはうまくいきました。しかし、コンソールに「ファイルが見つかりません」というメッセージが表示されないため、php が別のファイルの場合、パスが間違っているとは思いません。
ここで何が欠けているのですか?
[追加情報] hek2mgl の回答に応えて、エラー応答に xhr を追加し、コンソールでさらに情報を取得しました。
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
私が使用している他のすべての jQuery は正常に動作していますが、v1.8.3 を自分で使用したのはこれが初めてです。
[回答 - hek2mgl の功績] hek2mgl が非常に長いディスカッションで説明したように、フォームのボタンのクリック イベント内で ajax 呼び出しが行われたため、フォームを 2 回送信していました。
これを修正するには、ajax 呼び出しをクリック イベントから独自の関数に移動し、クライアント側の検証後に ajax 関数を呼び出して「return false;」を追加しました。関数呼び出しの後。