くいきません。 上の質問者の方と同様のエラーが表示...
回答
2件
AjaxのデバッグではChromeの開発者ツール内のNetworkタブ部分の情報を使います。デベロッパーツールを起動->Networkタブを選択した状態でフォームに入力すると「ajax.php」への新しいリクエストが表示されます。それをクリックすることでリクエストの詳細情報を表示することができるので、確認しましょう。※Networkタブの見方の詳細はネットワーク部をご確認ください。
例）
404の場合：存在しないページにリクエストが飛んでいる。
500の場合：サーバサイドの内部エラーで、ajax.phpやDBに問題がある。
今回のケースだと、自身で作成したデータベースのテーブル名が異なっていたりajax.phpの5行目以下のDB接続情報が異なっていると500エラーが発生します。その際はajax.php5行目以降のDB接続準備部分($user='root' $password='root')やDBのテーブル名が正しく設定できているか、ajax.phpとphpMyAdmineで確認しましょう。
また、もし404エラーが発生しているのであればapp.jsのurl設定に問題があると考えられます。Ajax設定部分の
$.ajax({
type: 'post',
url: 'ajax.php',
dataType: 'json',
のURL設定部分等について正しく設定されているか確認を行いましょう。
もし上記以外のエラーが開発者ツールのNetworkタブやコンソール画面で確認できれば、エラーの内容を検索してどこに原因があるかを絞っていきます。もし自身で解決が難しいようであれば、表示されるエラー内容等、詳細情報を質問画面から再度投稿してください。
Chrome開発者ツールのNetworkタブを調べたところ、StatusがFinishedとなっていました。
また、ajax.phpの詳細をみると▼Generalと▼Request Headersしかなく、その中で「Provisional headers are shown」というエラーが表示されていました。
このエラーをググると、キャッシュからファイルを取得するため通信が行われていないために出るもの?のようで、Networkタブの設定のDisable cacheにチェックを入れることで解決できるようなのですが、チェックを入れても状況まったく変わらずでした。
またjsに書いたajaxの設定にcache : falseを追加してもダメでした。
また改めてDBの接続情報や、テーブル名、URLも確認済みです。
$.ajax({
type: 'post',
url: 'ajax.php',
dataType: 'json', // 必ず指定すること。指定しないとエラーが出る&返却値を文字列と認識してしまう
data: {
email: $(this).val()
}
お時間のあるときに再度確認いただけると幸いです。
よろしくお願いいたします。
頂いたエラー内容についてこちらでも調査しましたが、「Provisional headers are shown」はご認識の通り、残っているキャッシュからファイルを取得した結果、通信が行われなかったことが原因で発生している可能性が高いです。
なので、既にお試しのNetworkタブのDisable cacheでの設定やajaxの設定にcache : falseを追加するのは方向性としては合っています。
もし下記の中で試していない物があれば、追加で試してみてください。
・Chromeの履歴の削除からキャッシュの削除を実行する
※ 現場でもキャッシュが原因のエラーや不具合は遭遇することがありますが、キャッシュのクリアは有効な解決手法です。
・Chrome以外のブラウザを使用してみる
因みにキャッシュが原因のエラーは、コードというよりもサーバー等のインフラやブラウザ等の環境に依存して発生することが多いものです。
今回のエラーだとブラウザに入れている拡張機能等もエラー発生原因となっている可能性があるので、拡張機能を削除するなどの手段でも解決できる可能性があります。
・Chromeの履歴の削除からキャッシュの削除をする
・Chrome以外のブラウザを使用する
・拡張機能を削除する
これら全て試してみましたがダメでした。。。
１つ気になったのはNetworkタブを開いて更新ボタンを押したとき、
ajax.phpだけでなく、index.html、style.css、app.jsの３つのファイルも同様に
Status=Finished、「Provisional headers are shown」エラーが表示されます。
ajax.phpは動いてないのでこのエラーが表示されるのは納得なのですが、
他の３つのファイルは正常に機能しているのにAjaxと同じエラーが表示されるのは何故なのでしょうか？
このエラーからコードの書き間違いということも考えられますでしょうか...？
よろしくお願いいたします。
ajaxを使っているときに「CORS」という仕組みによって、「Provisional headers are shown」というエラーが発生する場合があります。（断定はできませんが、CORSの場合は他のhtmlファイル等も「Provisional headers are shown」エラーとなる可能性はあります。）
「CORS」とは、ざっくり言えば、あるURLで使われているプログラム上から他のドメインのURLにアクセスするときに、アクセス制限をかける仕組みです。
「ajax CORS エラー」などで検索すると、下記のサイトなど、参考になるサイトがヒットするので
詳しく知りたい場合は是非一度調べてみてください。
https://rso.hateblo.jp/entry/2019/02/13/225329
今回は、ajax内で他のドメインにアクセスしようとしているわけではないのですが、CORSについて詳しく調べてみると「https」「http」の違いによってもアクセスが制限されてしまう場合があるようです。
（つまり、ブラウザ上でhttps://localhost~とアクセスしている場合、ajaxでhttp://localhost~にアクセスしようとするとCORS制約に引っかかってアクセスできなくなることがある）
なので、まずブラウザ上でアクセスしているURLがちゃんとhttpになっており、httpsになっていないことをチェックしてもらうと良いと思います。
httpになっているにも関わらずこのエラーが出る場合には、次に
ajaxの処理を行わない場合に、正しくリクエストが成立するのか、つまり「Provisional headers are shown」エラーが出ないのかというところをチェックしてもらいたいです。
例えばajaxを使わない他の画面や機能だったり、この処理でajaxの部分だけコメントアウトしたりしたときに、うまく動くのかというところを見ていただきたいです。
これでうまく動くのであれば、「Provisional headers are shown」エラーが出ている原因は本当にajaxのせいであり、CORSを含めてよりajax関連の不具合の可能性を洗い出して深掘りしていくというアプローチをとっていくことができます。
なので、今回とるべき対応をまとめると
・httpでアクセスしてることを確認する
・ajaxを使っていないところではちゃんと動くのかを確認する
というところを行なってもらって、状況をより詳細に分析していきましょう。
htmlファイルでlocalhostから開かなくても画面が表示されたので、
アドレスを変えることを完全に失念しておりました・・
初歩的なことで、ここまでお時間取らせてしまい、大変申し訳ありませんでした。
今後はページのアドレスをまずは確認するように気をつけます。。
今回のエラーでnetworkタブの確認方法やエラーの切り分け方など再確認でき、
またCORSの仕組みなども知れたのでとっても勉強になりました。
貴重なお時間をありがとうございました。m(._.)m
部活の学習一覧
Lesson 01
「Ajax通信と非同期処理」
Lesson 02
「JSONってなに？データの形式」
Lesson 03
「Ajaxを実装してみよう！その１」
Lesson 04
「Ajaxを実装してみよう！その２」
Lesson 05
「Ajaxを実装してみよう！その３」
Lesson 06
「Ajax通信でemail重複チェックをしてみよう！その１」
Lesson 07
「Ajax通信でemail重複チェックをしてみよう！その２」
Lesson 08
「フォームが入力されるまでボタンを押せないようにしてみよう！」
Lesson 09
「モーダルを作ろう！」
Lesson 10
「javascriptの言語仕様〜基本の書き方〜」
Lesson 11
「javascriptの言語仕様〜データ型〜」
Lesson 12
「javascriptの言語仕様〜演算子〜」
Lesson 13
「javascriptの言語仕様〜条件分岐・繰り返し処理〜」
Lesson 14
「javascriptの言語仕様〜オブジェクトとnew演算子〜」
Lesson 15
「javascriptの言語仕様〜独自コンストラクタ〜」
Lesson 16
「javascriptの言語仕様〜色々なオブジェクト〜」
Lesson 17
「javascriptの言語仕様〜関数〜」
Lesson 18
「javascriptの言語仕様〜this〜」
Lesson 19
「javascriptの言語仕様〜prototype(プロトタイプ)〜」
Lesson 20
「javascriptの言語仕様〜クロージャーその１〜」
Lesson 21
「javascriptの言語仕様〜クロージャーその２〜」
Lesson 22
「javascriptの言語仕様〜クロージャーその３〜」
Lesson 23
「ドロップダウンメニューを作ろう！」
Lesson 24
「画像スライダーを作ろう！part1」
Lesson 25
「画像スライダーを作ろう！part2」
Lesson 26
「JSでCookieをいじってみよう！part1」
Lesson 27
「JSでCookieをいじってみよう！part2」
Lesson 28
「npmを使ってみよう！〜コンソールとシェルの書き方〜」
Lesson 29
「npmを使ってみよう！〜npmでライブラリをインストール〜」
Lesson 30
「npmを使ってみよう！〜browserifyでファイル結合〜」
Lesson 31
「gulpを使ってみよう！〜gulpとは？〜」
Lesson 32
「gulpを使ってみよう！〜gulpの書き方〜」
Lesson 33
「gulpを使ってみよう！〜画像圧縮とファイル監視〜」
コーヒーブレイク
「はたらくプログラミング 第7話」
ご意見箱
上の質問者の方と同様のエラーが表示されたので、回答のURLを参考にコンソールにopen /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dirを打って起動したChromeから試したところ、consoleに表示されるエラーは消えたのですが、Ajax通信はできないままです。
試したこと
・sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args -allow-file-access-from-filesをコンソールに打つ
・open /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dirをコンソールに打ち、chromeを起動する
・dataTypeをコメントアウトすると、なぜかjsのis-successクラスが動く。
昨日から埒が明かない状態なので、ご助言いただけると助かります...
よろしくお願いいたします。