Q&A
とりあえず Fiddler を入手して、要求・応答をキャプチャして、中身がどうなっているか調べてみてください。そこにヒントが見つかると思います。（Fiddler でなくでもブラウザのディベロッパーツールなどでもキャプチャできますが、Fiddler が使いやすいので絶対的にお勧めです）
◆前書き
業務で全く経験したことのないAjaxをお願いされて勉強を始めました。
◆実現したいこと
このサイトのように
１と打てば→「田中」
２と打てば→「佐藤」
と出るようにしたい。
◆現状
１、２は打てるが送信を押してもレスポンスがなく返却値もない。
ディレクトリ構造も同じ階層に
index.html、sample.phpファイルを置いているので問題ないかと思います。
本日より学習を始めたのですが、環境？なのかエラーログを吐くわけでもないので何卒お力添えいただけたらと思います。
以上、よろしくお願いいたします。
◆追記
Fiddler を入手して、要求・応答をキャプチャして・・・
⇒入手いたしました。
送信ボタンを押しているのですが、Fiddler上何も表示されないのでおそらく叩けていないのだなと思いました。
タグにphpも設定しておいた方が・・・
⇒ご指摘ありがとうございます。追加いたしました。
あなた自身が書かれているコード・・・
⇒記載いたしました。参考にしているサイトと同じコードになります。
◆コード
同じディレクトリ配下に、
・index.html
・sample.php
▼index.html
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>ajax</title> 6</head> 7<body> 8<h1>jquery.get()</h1> 9 10<label>ID：<input type="number" name="name" value=""></label> 11<input type="button" value="送信"> 12<p>名前：<span></span></p> 13 14<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 15<script> 16$(function() { 17 18 $("[type=button]").on("click", function() { 19 20 $.get("sample.php", { 21 id : $("[type=number]").val() 22 }, function(data) { 23 $("span").text(data); 24 }); 25 26 }); 27 28}); 29</script> 30</body> 31</html>
▼sample.php
php
1<?php 2switch ($_GET['id']) { 3 case 1: 4 echo "田中"; 5 break; 6 case 2: 7 echo "佐藤"; 8 break; 9 default: 10 echo "なし"; 11 break; 12}
◆phpの環境が自分のPCに無かったので・・
このサイトを参考にphpの環境を作りました。
タグにphpも設定しておいた方が、よくわかっている人の目に留まると思います。
私はphpはわからないため力にはなれませんが、書いておけばphpが得意な人が見てくれる可能性が上がると思います。
あなた自身が書かれているコードを全てのファイル分記載してください。
遅くなり申し訳ございません。
本業で他のことをしていたためこちらの勉強する時間が取れずにいました。
追記いたしましたので見てくださるとうれしいです。
Ajaxはともかく、PHPはちゃんと動いてますでしょうか？
ブラウザで http://localhost/sample.php?id=1 にアクセスすると
「田中」が表示されますか？ (http://localhost:8000/ とかかもしれませんが)
https://sastd.com/php-easy-environment/
ここにWEBサーバに関する記載がないような。
WEBサーバは起動してますか？
index.htmlへはどういうURLでアクセスしてますか？
C:\Temp\index.html とかだったらまずjqueryが読み込めないと思います。
(//始まりのプロトコル省略なので file://code.jquery.com/jquery-3.1.1.min.js にアクセスしてしまう)
VMに載せてみたら普通に動きました。プログラムには何も問題ないようです
環境の問題ですかね？
他の回答者のコメントにあるようにjQueryのパスミスでは？
一時期 //sample.com の書き方はGoogleから推奨されていましたが今現在では https://example.com という書き方が推奨されています。
回答1件
0
XAMPP上で動作させたところ正しく動いていたので、コードには問題なさそうです。
jQueryのタグを削除またはphpファイルを削除したところ同様の状況(入力はできるが送信ができていない)が再現できましたので、①jQueryを読み込めていない または ②phpが実行できていない ことが原因と思われます。
いずれにせよ実行環境を見直してみるとよいかもです。
投稿2019/10/03 08:59
総合スコア25
あなたの回答
tips
プレビュー
