jQueryの.get()でPHPファイルから処理結果を取得したい

前提・実現したいこと

jQueryの.get()を使って、phpファイルに値を送って処理結果を取得したいです。

実現したい機能としては、入力欄に入力した値をボタンを押したら下に表示できるようにしたいです。

発生している問題・エラーメッセージ

該当のソースコード

<body>
    <p>JQueryの練習</p>

    <p>
        <input type="text" name="name" id="name">
        <input type="button" id="greet" value="Greet!">
    </p>
    <div id="result"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
     $(function() {

        $('#greet').click(function() {

            $.get('greet.php', {
                name: $('#name').val()
            }, function(data) {
                $('#result').html(data);
            });
        });
     });
    </script>
</body>

php
1<?php
2echo htmlspecialchars("hi!" $_GET['name'], ENT_QUOTES, "utf-8");
3?>

試したこと

キャッシュの削除をしてみても駄目でした。
ディベロッパーモードでNetworkタブを調べてみたところ
greet.php?name=dsaf 200　　xhr jquery.min.js:2 241 B 7 ms
という値が取れ、問題なさそうなのですが値が帰ってきません。

行動規範の内容に同意します

回答2件

まずは、$.getのコールバックの中にconsole.log(data)を仕掛けて、どんな値がJavaScript側に伝わっているか確認しましょう。

「リクエストを送るのに失敗している」「PHPが正しく動作していない」「PHPが返した値をJavaScriptで解釈するのに失敗している」「値は得られたけど、JavaScriptでの表示がうまくいっていない」など、各所で失敗の可能性が考えられますので、1ステップずつどこまでできているのか確認するのが確実です。

投稿2020/04/23 01:45

maisumakun

総合スコア146063

ベストアンサー

("hi!" $_GET['name'],

構文エラーです。
文字列結合してください。

ただ、PHP側のエラー表示させておけばエラーメッセージが返ってくるので気づけると思います。
offだとそれより前に他になにも出力なければなにも出力しないので現在の現象になっているものと思われます。

投稿2020/04/23 01:44

m.ts10806

総合スコア80875

m.ts10806

2020/04/23 01:59 編集

エスケープならPHP側じゃなくてもjQueryの.text()で出来るから、なるべくサーバーサイドはデータ処理、出力のみに注力すべきと思う。手順が増えればバグも増え、見えにくくなる。(今回のミスは関数直接関係ないけど関数使うことで見えにくくはなってる)

ktlmeon

2020/04/23 02:03

回答していただきありがとうございます！ ("hi!" . $_GET['name'], ini_set('display_errors', "On"); と構文を修正し、エラー表示をOnにしても何も表示されないです、、

ktlmeon

2020/04/23 02:05

console.log()で試した結果、phpの中身が <?php echo htmlspecialchars("hi! " . $_GET['name'], ENT_QUOTES, "utf-8"); ini_set('display_errors', "On"); ?> とそのまま帰ってきていました。

m.ts10806

2020/04/23 02:15

htmlもhttpでアクセスしてください。

ktlmeon

2020/04/23 04:00

phpの実行環境が整っていなかっただけのようでした。 virtual voxで実行していたものをxamppに変えて動かしたら正常に動きました！ console.log()で確認して、環境が問題という事に気が付けたのでとても助かりました。色々と教えていただき、ありがとうございました！

m.ts10806

2020/04/23 04:47

細かいですが「Box」ですね。むしろ仮想環境のほうが推奨はされますけど、インフラ面になるのでひとまずは。

行動規範の内容に同意します

あなたの回答