質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

3回答

539閲覧

ajaxの動作について、サンプル使っても動かない

tsubasazero

総合スコア3

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/07/21 05:51

前提

参考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を入れてみたが動作しませんでした

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Matsumon0104

2022/07/21 06:30

参考ページの中に「通信が成功したかはブラウザの検証ツールで確認」とありますが、問題発生時にこの確認を行うと、どのように表示されていますか?
tsubasazero

2022/08/09 07:09

Networkを見ると15msから20msが途中で切れてますが、最初と切れてる20msあたりから灰色でそれ以外は緑色になっています
guest

回答3

0

fdsa fsdafdsa
fds
fds
àd

sdaf
sdafd

投稿2022/07/21 08:05

thienhv

総合スコア2

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

JavaScriptコードを実行しているページのURLが、http:// でも https:// でもない場合、AJAXは利用できません。

JavaScriptコードを実行しているページのURLのオリジンが、AJAX接続先のURLのオリジンと異なる場合、アクセスできません。

自分用のウェブサーバを用意して試してみてください。

投稿2022/07/21 06:40

int32_t

総合スコア20659

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

https://kinocolog.com/ajax/test.html 」はCORSに引っかかるようで外部からXHRで参照できません

投稿2022/07/21 06:40

編集2022/07/21 06:40
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問