跨る質問になります。 解説の中でapp.jsの8行...
回答
2件
キャッシュはサイトの高速化において非常に大切な役割を果たしています。
（参考1：https://qiita.com/kazukichi/items/572fc7198e6bb001b25）
一方で、キャッシュが残っているとブラウザはそれをもとにページを表示しようとし、結果HTMLやJSへ行った修正が反映されず、以前表示した古い情報のまま出力されてしまうことがあります。
今回の状況的を伺うに、キャッシュが悪影響を及ぼしている可能性が高いので、まずはChromeの履歴削除からキャッシュの削除を行い、app.jsへの修正が反映されるか再度試してみてください。
因みにわたしはキャッシュ削除の度に履歴の削除をするのが面倒なので、「Clear Cache」というChromeの拡張機能をインストールして使用しています。
また、下記参考Qiitaのようにブラウザキャッシュを使わない設定をhtmlに行う事もできます。
(参考2：https://qiita.com/masakazu_ca/items/5b6247c240408b4cd16b )
もしキャッシュの削除を行っても問題が解決しない場合は、編集しているファイルがブラウザ上で表示しているものでない可能性もあるので、念の為そのあたりも確認してみてください。
回答に書かれたChromeの履歴削除からキャッシュの削除を行った後から、それまでは出来ていた「ここだけが入れ替わります」の部分に「名前」と「年齢」が読み込まれなくなりました。
開発ツールを見るとindex.phpを読み込んだ時点で
①
Access to script at 'https://code.jquery.com/jquery-3.2.1.min.js' from origin 'http://localhost:8888' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
②
Uncaught ReferenceError: $ is not defined at app.js:1
③
GET https://code.jquery.com/jquery-3.2.1.min.js net::ERR_FAILED
という3つのエラーが出ていました。
①について自分で調べてみましたが、「ローカルホストがjQueryのアクセスをCORS Policyに引っかかって許可しないっぽい」ということしか分からず、こうなっている原因が何なのか、何をすれば元のように「名前」と「年齢」が表示されるのか分かりません。
上記の質問と関連しているのか、それとも全く関連していないのかも分かっていません。
上記の質問が解決する以前の問題になってしまいましたが、ご教授願います。
今回の件について調べてみると、どうやらjQuery公式のCDNが不具合を起こしているようで、結果CDNの読み込みに失敗してjQueryが使えなくなっていました。
なおキャッシュクリア前は正常に動いていたのは、以前読み込んだjQueryをキャッシュから読み込んでいたからだと考えられます。
jQueryは公式以外にも、GoogleやMicrosoftがCDNを使ってファイルを配信しています。上記検証でエラーが出た際は、公式以外で公開されているCDNを使用しましょう。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
私の環境でも、index.phpの<script src=“〜”>部分を上記のGoogleのCDNで置き換えることで、正常に動くようになりました。
このようなケースは稀だとは思いますが、一度検証みてください。
部活の学習一覧
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話」
ご意見箱
解説の中でapp.jsの8行目のurl:'ajax_html.php',の中身をajax_sample.phpやajax_json.phpに書き換える箇所がありますが、urlを書き換えても常にajax_html.php「名前は〜で、年齢は〜です。」のまま表示されます。
試しにurlの中身を何も書かずにajax_html.phpも消した状態で表示しましたが、「名前は〜で、年齢は〜です。」と表示されます。
ファイルの上書き保存はしています。
同じフォルダ内のindex.php等の中身を書き換えるとしっかり反映されます。
開発ツールでソースを確認するとapp.jsのurlを何に書き換えてもajax_html.phpとなっているので、書き換えた内容への変更が効いていないようです。
なぜurlを書き換えても変更が反映されないのか分からないので、検討すべきこと等教えて頂きたく質問させてもらいました。