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

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

ただいまの
回答率

88.10%

【JavaScript】非同期通信処理をシンプルに使う方法

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,262

score 3

毎度、初歩的な質問です。
XMLHttpRequestとか$.ajaxとかありますよね。
外部に保存されている.PHPに書かれている内容(関数など)を呼び出してhtml内に出力したいと思っています。

jQueryだと下記のようなコードになるかと思うのですが。よくわからず。

$.ajax({
         type: "POST",
         url: "./hoge.php"

〜省略〜
}


hoge.php(例えばこの内容を呼び出してHTMLに反映させたい)

<?php echo"hello"; ?>

hoge.phpにはシンプルな内容を記述し、DOMで出力するような事がしたいですのですが、これがなかなか思うように動作しません。いつも皆さんに頼りきりで申し訳ありませんが、いつか恩返しできるようになりたいと思います。

jQueryでもJavaScriptでも良いので、よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/06/24 20:01

    省略せずにお書きください。また、エラーは出ていませんか?デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

    キャンセル

回答 2

+2

『よくわからず』ではこっちもなにを答えていいのか分かりません。質問は明確に。

とりあえず、↓この辺でも見てはいかがか。
.load() | jQuery API Documentation

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

check解決した方法

-1

回答が無かったため自己解決しました。

下記はjQueryでPHPをGETする場合の
もっともシンプルなかたちだと思います。
色々な処理に利用できますが、いろいろ試しても思うように動作しないです。

//jQuery

$.ajax({

    url: './hoge.php',
    type: 'GET',

    success: function(data){

    alert(data);

    },
    error: function(data) {

        alert('error!');

    }
});

//hoge.php

<?php

    $data = "Hello";
    echo json_encode(compact('data'));

?>

いくつかのプロパティやデータタイプを指定する事ができるようですが、間違えるとうまく動作しないため注意です。例)dataType: xml,json,script,html,text
PHPには変数に文字列を入れていますが、最終的にJSONにして、変数をcompact()で
配列にし、echoした内容が下記関数で発動されました。
(セッション変数などもうまく使えると思います。)

success: function(data){

alert(data);

}

ただし、dataTypeでJSONを指定するとエラーとなり、textを指定すると
{"data":"hello"}と返ってきました。面白いですが、簡単なようで難しいです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/06/25 17:32

    > 回答が無かったため自己解決しました。
    いえ、Lhankor_Mhy さんの回答がありましたが…。
    質問者さんの主張は「私の求める回答がありませんでした」かもしれませんが、Lhankor_Mhy さんの回答の「『よくわからず』ではこっちもなにを答えていいのか分かりません」が回答側の言い分だと思います。
    期待する回答がないのなら、質問の仕方を変えてみたり、質問を補足する事で解決出来る場合があります。
    少なくとも、Lhankor_Mhy さんは問題点を指摘しているのですから、それに何らかの返答を返すのが質問者としての筋ではないでしょうか。
    https://teratail.com/help/question-tips#questionTips2

    > 下記はjQueryでPHPをGETする場合のもっともシンプルなかたちだと思います。
    引数で success, error を指定する書き方は古く、エレガントではありません。
    最近のjQueryは古い書き方を排除して新しい書き方を勧める傾向がありますので、お勧めはしがたいですね。.success(), error() 藻削除されましたし。
    Promiseドキュメントにあるように、Promise形式のメソッドを使うのが妥当なように思います。
    http://api.jquery.com/jquery.ajax/
    あと、Fetch APIもかなりシンプルなインターフェースを持っています。個人的には私 Fetch APIを使います。

    キャンセル

  • 2017/06/26 09:12

    > 下記はjQueryでPHPをGETする場合のもっともシンプルなかたち

    違うと思いますよ。$.ajaxはローレベルなメソッドですから。

    キャンセル

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

  • ただいまの回答率 88.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る