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

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

ただいまの
回答率

91.26%

  • PHP

    15648questions

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

  • JavaScript

    11747questions

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

  • Ajax

    830questions

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

ajaxを使用して画面表示しようとしているが、json形式のデータ渡しがどうも正常に動かない。

解決済

回答 1

投稿 編集

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

kenji267

score 9

前提・実現したいこと

$.ajaxを使用し、画面を制御したいのですが、json形式でデータが渡っていないようです。
手詰まり感がありもう質問させていただきます。
記載したプログラムを一部記載していますが必要であれば残りのプログラムやテーブル等の情報も
追加します。
アドバイス頂ければ幸いです、よろしくお願いします。

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

XMLHttpRequest : 200
textStatus     : parsererror
errorThrown    : Unexpected token a in JSON at position 0

該当のソースコード

<?php

require_once(__DIR__ . '/config.php');
require_once(__DIR__ . '/functions.php');
require_once(__DIR__ . '/Todo.php');

$todoApp = new \MyApp\Todo();
$todos = $todoApp->getAll();

?>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>alluser</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="container">
    <ul id="todos">
      <?php foreach($todos as $todo) : ?>
      <li class="hyoji_todo" id="todo_<?php echo $todo->id;?>" data-id="<?php echo $todo->id;?>">
        <span>顧客名:</span><span><?php echo $todo->name ;?></span>
      </li>
     <?php endforeach; ?>
    </ul>
    <table cellspacing="3" id="todo_template" style="display:none">
      <tr><td valign="top"><span>顧客名</span><span></span><span class="hiduke">17/12/28</span></td><td valign="top"><span>性別</span><span></span><span  class="hiduke">17/12/28</span></td></tr>
      <tr>
      <tr><td valign="top"><span>出身地</span><span></span><span class="hiduke">17/12/27</span></td>
      </tr>
      <tr>
      <tr><td valign="top"><span>役職</span><span></span><span class="hiduke">17/12/27</span></td>
      </tr>
    </table>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="todo.js"></script>
</body>
</html>
<?php

namespace MyApp;

class Todo {
  private $_db;

  public function __construct(){
    try {
      $this->_db = new \PDO(DSN,DB_USERNAME,DB_PASSWORD);
      $this->_db->setAttribute(\PDO::ATTR_ERRMODE, \PDO::ERRMODE_EXCEPTION);
    } catch (\PDOException $e){
      echo $e->getMessage();
      exit;
    }
  }

  public function post(){
    $id=$_POST['id'];

var_dump($id);

    $sql = sprintf("
        select c.name as name,h1.name as sex,h2.name as position from customer as c
         left join hanyo as h1 on c.sex = h1.subcode  and h1.code = 'A01'
         left join hanyo as h2 on c.position = h2.subcode  and h2.code = 'A02'
        where c.id=%d",$id);

    $stmt = $this->_db->query($sql);

    $result = $stmt->fetchObject();
    echo('aaaa');
    var_dump($result);
    return [
      'name' => $result->name,
      'sex'=> $result->sex,
      'position'=> $result->position
    ];

  }

  public function getAll(){
    $stmt = $this->_db->query("select * from customer ");
    $result = $stmt->fetchAll(\PDO::FETCH_OBJ);
    return $result;
  }

  public function getAll1(){
    $stmt = $this->_db->query("select * from customer where id=1");
    // var_dump($stmt->fetchAll(\PDO::FETCH_CLASS));

    $hanyo_sex = $this->_db->query("select * from hanyo where code='A01'");
    var_dump($hanyo_sex->fetchAll(\PDO::FETCH_CLASS));
  }

}
<?php

require_once(__DIR__ . '/config.php');
require_once(__DIR__ . '/functions.php');
require_once(__DIR__ . '/Todo.php');

$todoApp = new \MyApp\Todo();
var_dump($_POST);
var_dump($_GET);
var_dump($_SERVER['REQUEST_METHOD']);
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  try {
    $res = $todoApp->post();
    header('Content-Type: application/json; charset=utf-8');
var_dump($res);
    echo json_encode($res);
    // echo json_encode(['name'=>'World']);
    exit;
  } catch (Exception $e) {
    header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500);
    echo $e->getMessage();
    exit;
  }
}
$(function(){
  'use strict';

  $('#todos').on('click','.hyoji_todo',function(){
      //idを取得
      var id = $(this).data('id');

      //ajax処理
      $.ajax({
          url: '_ajax.php',
          type:'POST',
          dataType: 'json',
          data:{
           id:id,
          },
          timeout: 10000,
       }).done(function(res){
          console.log('aaaaaa!!!');
          console.log(res);
          if($('#todo_'+id).hasClass('aaa')){
            console.log('aaaa');
            // console.log($('#todo_'+id).children());
            $('#todo_'+id).each(function(i){
              $(this).find('table').remove();

            });
            $('#todo_' + id).removeClass('aaa');
          }else{
            console.log('22222');
            var $table = $('#todo_template').clone();
            $('#todo_'+id).append($table.show()).addClass('aaa');
          }
        }).fail(function(XMLHttpRequest, textStatus, errorThrown){
          alert('error');
          console.log("XMLHttpRequest : " + XMLHttpRequest.status);
console.log("textStatus     : " + textStatus);
console.log("errorThrown    : " + errorThrown.message);
        })


    });//jquery

});

試したこと

dotinstallのサイトを中心に$.postでプログラムを記載したり、それでも動かないので、ほかのサイトで$.ajaxの記載を参考に書いていますが、なかなかうまくいきません。

補足情報(言語/FW/ツール等のバージョンなど)

より詳細な情報

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

問題点:header関数より前にvar_dumpで出力しているために、受け取り側で正しいJSONと認識できていない。

$resの内容は届いているのでは?

【Chrome デベロッパーツール Networkパネルの使い方 | Web Tips】
http://weback.net/utility/1491/

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/01 08:57

    回答ありがとうございます。
    header関数にかかわる所のvar_dump外したらJSONデータの文字化けがなくなり、$resが届き、画面も表示できるようになりました。
    質問するときはもっと不具合のところに絞って確認するようにします。失礼しました。

    キャンセル

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

ただいまの回答率

91.26%

関連した質問

  • 受付中

    異なるhtmlから各々違うphpをajaxで呼びたい

    $.get('show.php', { name:$('#id').val() }, function(data){ $('#result')

  • 受付中

    Ajax通信でデータを送れません。

    情報を探しています var forml=document.forms.formlist; formdata = new FormData(); formd

  • 解決済

    非同期通信を使用して画像をアップロードしたい。

    現在FuelPHPをりよ空いて開発しているのですが 画像を一度に複数上げるために非同期通信を実装したいです。 参考にしているサイト 実装したい機能イメージ このように画像を複数あげ

  • 解決済

    PHP MySQL の連携

    PHPのWEBサイトで名前、年齢を登録ボタンを押すとMYSQLのテーブルに格納させる設定方法を教えて下さい。(レンタルサーバで各ソフトはインストールしています。)  PHPとMYS

  • 解決済

    PHPで画面遷移が遅い

    PHP+JAVASCRIPTでプログラムを書いていますが 画面の遷移が遅くて困っています。 テキストボックスに入力した値を、JAVASCRIPTで拾い JAVASCRIPTから

  • 解決済

    ページ遷移での値保持について

    PHP初心者です 現在商品数が180件程度のカタログサイトを作っています。 以前質問させていただいて、優しい方のお陰でページング機能を追加することができました。 しかしここで、

  • 解決済

    データベースのデータを複数のプルダウンに入れたいです。

    現在はプルダウンを一つ表示していますが、複数のプルダウンを作成したい場合はどうすればいいでしょうか? 下記のコードを丸ごとコピーして下に張り付けばできますが、あまりにも賢くない

  • 解決済

    CakePHP3+Ajaxで検索結果を表示する

    前提・実現したいこと CakePHP3.5 + Ajaxで検索を行い、検索結果を一覧表示する。 検索項目に更に入力すると絞り込み検索でリアルタイムで結果が変わる様にしたい。イメージ

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

  • PHP

    15648questions

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

  • JavaScript

    11747questions

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

  • Ajax

    830questions

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

  • トップ
  • PHPに関する質問
  • ajaxを使用して画面表示しようとしているが、json形式のデータ渡しがどうも正常に動かない。