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

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

ただいまの
回答率

91.03%

  • PHP

    17722questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    13784questions

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

  • Ajax

    957questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

AjaxでPHP出力結果を正しく取得できない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 178

okame

score 43

前提・実現したいこと

  • PHP5.5.38
  • Apache/2.4.23
  • MacBook Pro (Retina, 13-inch, Mid 2014)
  • macOS Sierra

簡単なAjaxのサンプルを作ってまして、PHP出力結果を取得してその結果にてHTMLを書き換える処理を書いているのですが、
なぜか出力結果ではなくPHPソースコード文字列を取ってきてしまっています。

該当のソースコード

<html>
 <head>
  <meta charset="UTF-8">
  <title>Boards 'R' Us</title>
  <!-- <link rel="stylesheet" type="text/css" href="boards.css" /> -->
 </head>

 <body>
  <h1>Boards 'R' Us :: Custom Boards Report</h1>
  <div id="boards">
   <table>
    <tr><th>Snowboards Sold</th>
     <td><span id="boards-sold">1012</span></td></tr>
    <tr><th>What I Sell 'em For</th>
     <td>$<span id="price">249.95</span></td></tr>
    <tr><th>What it Costs Me</th>
     <td>$<span id="cost">84.22</span></td></tr>
   </table>
   <h2>Cash for the Slopes: 
    $<span id="cash">167718.76</span></h2>
   <form method="GET" action="getUpdatedBoardSales.php">
    <input id="submit" value="Show Me the Money" type="button" />
   </form>
  </div>

  <script>
    (function() {

      var request = null;

      document.getElementById('submit').addEventListener('click', function() {
        getBoardsSold();
      }, false);

      function createRequest() {
        try {
          request = new XMLHttpRequest();
        } catch (trymicrosoft) {
          try {
            request = new ActiveXObject('Msxm12.XMLHTTP');
          } catch (othermicrosoft) {
            try {
              request = new ActiveXObject('Microsoft.XMLHTTP');
            } catch (failed) {
              request = null;
            }
          }
        }

        if (request === null) {
          alert('エラー! requestオブジェクトの作成に失敗しました。');
        }
      }

      function getBoardsSold() {
        createRequest();
        request.open('GET', './getUpdatedBoardSales-ajax.php', true);
        request.onreadystatechange = updatePage;
        request.send(null);
      }

      function updatePage() {
        if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
          var newTotal = request.responseText;
          var boardsSoldElm = document.getElementById('boards-sold');
          var cashElm = document.getElementById('cash');
          boardsSoldElm.textContent = newTotal;

          var price = document.getElementById('price');
          var cost  = document.getElementById('cost');
          var costPerBoard = parseFloat(price.textContent) - parseFloat(cost.textContent);
          var totalProfit = parseFloat(costPerBoard) * parseFloat(boardsSoldElm.textContent);

          cashElm.textContent = totalProfit;
        }
      }

    })();
  </script>
 </body>
</html>
<?php

// Start with an arbitrary number of boards sold
$totalSold = 1012;

// Reflect new sales
srand((double)microtime() * 1000000);
$totalSold = $totalSold + rand(0,1000);

echo $totalSold;

?>

初期表示
初期表示

buttonクリック後
buttonクリック後

試したこと

ターミナルからPHPファイル実行すると、きちんと出力返してくれます。

$ php getUpdatedBoardSales-ajax.php 
1599

ブラウザでPHPファイルを開いても数値が正しく表示されます。

 以上

皆様のお知恵を拝借できれば幸いです。宜しくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • skuromaku

    2017/09/28 18:21

    ブラウザで「getUpdatedBoardSales-ajax.php」を開くと「1599」と表示されますか?

    キャンセル

  • okame

    2017/09/28 19:12

    表示されます!(乱数なので1599ではないですが)

    キャンセル

回答 2

checkベストアンサー

+1

oards 'R' Us :: Custom Boards Report なファイルをダブルクリック等で、開いていませんか?
その場合、相対パスで書かれた php ファイルが、Web サーバを経由されず開くので、ソースがそのまま表示されます。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/28 20:14

    回答ありがとうございます!おかげさまで解決いたしました。
    ダブルクリックではなくFinderからドラッグ&ドロップで開いてたのが原因みたいでした。
    URLバーに「localhost/...」と打って開いたら正しく値を取得できました。
    本当に助かりました。

    キャンセル

0

ajaxで読むときだけソースが表示されるというのはちょっとげませんね

javascriptでおかしいところがあるのでそれだけ

var totalProfit = parseFloat(costPerBoard.textContent) * parseFloat(boardsSoldElm);

  • costPerBoard.textContent →costPerBoard
  • boardsSoldElm→boardsSoldElm.textContent
var totalProfit = parseFloat(costPerBoard) * parseFloat(boardsSoldElm.textContent);

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/28 21:00

    ご教示ありがとうございます!
    先ほどベストアンサーの方の対処法を試している最中にわたくしも気付きました^^;

    キャンセル

  • 2017/09/28 21:04

    こちらの質問コードも修正しました!

    キャンセル

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

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

関連した質問

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

  • PHP

    17722questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    13784questions

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

  • Ajax

    957questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。