前提
参考URL
https://kinocolog.com/jquery_ajax/
初心者です
ajaxの勉強中で、もらったカリキュラムがなぜ動かないかを考えているうちに、サンプルがとちゃんと動けば原因がつかめると思いたちました。
検索して上記のURLの簡単そうなサンプルを動かそうと思いました。
結果的にコピペしても動かないとなりました。
URLの方は動くのにコピペしたら動かないので、ますます分からなくなりました。
実現したいこと
上記のURLで「Ajaxの実行サンプルコード」このタイトルのコードをそのまま動かしてみたい
発生している問題・エラーメッセージ
問題点 サンプルそのまま貼り付けても 「Ajax通信成功!おめでとう!Ajax通信は成功しました!」 という表示の動作が出ない
該当のソースコード
html
1 2<!DOCTYPE html> 3<html lang="en"> 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <link rel="stylesheet" href="./demo.css"> 10</head> 11<body> 12 <div class="result">ここにajaxの結果を書き換えます</div> 13 <input type="button" class="sample_btn" value="ajax通信で取得する"> 14 <script src="./demo.js"></script> 15 16</body> 17</html> 18 19 20ーーーーーーーーーーーーーー 21js 22 23(function(){ 24 //.sampleをクリックしてajax通信を行う 25 $('.sample_btn').click(function(){ 26 $.ajax({ 27 url: '/ajax/test.html', 28 /* 自サイトのドメインであれば、https://kinocolog.com/ajax/test.html というURL指定も可 */ 29 type: 'GET', 30 dataType: 'html' 31 }).done(function(data){ 32 /* 通信成功時 */ 33 $('.result').html(data); //取得したHTMLを.resultに反映 34 35 }).fail(function(data){ 36 /* 通信失敗時 */ 37 alert('通信失敗!'); 38 39 }); 40 }); 41});
試したこと
url: '/ajax/test.html',
ここをurl: 'https://kinocolog.com/ajax/test.html',
直接URLを入れてみたが動作しませんでした