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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

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

Q&A

解決済

6回答

3179閲覧

ajaxを使った処理がうまく反映されない

Beronika

総合スコア18

PHP

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

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

0グッド

0クリップ

投稿2019/05/22 01:46

編集2019/05/28 00:18

現在、ajaxを用いて、入力されたデータをデータベースに保存して、別の部分に反映させるというプログラミングを書いております。
プログラミングを書き進めて、実際にデータベースにデータを格納することはできました。しかし、その後、json形式にしてデータを反映させる処理ができません。お時間を取らせてしまい申し訳ありませんが、ここさえ解決すると一気に進めそうなので協力の方をお願いいたします。

ソースコードは下です。わかりやすいように簡易版でまとめます。

ソースコード

js

1$("#registration").on('click',function(){ 2 $.post('_Ajax.php',{ 3 dataType:'json', 4 name:$('#name').val(), 5 url:$("#url").val(), 6 mode:'reg' 7 }).done(function(res){ 8 console.log("こんにちは!"); 9 }).fail(function(XMLHttpRequest, textStatus, errorThrown){ 10 console.log('失敗'); 11 console.log("XMLHttpRequest : " + XMLHttpRequest.status); 12 console.log("textStatus : " + textStatus); 13 console.log("errorThrown : " + errorThrown.message); 14 }); 15 });

PHP

1//jsから渡ってきた値を処理するコード。今回はPHP・Aとする 2<?php 3require_once('management.php'); 4 5$ajax_processing = new DB(); 6 7if ($_SERVER['REQUEST_METHOD'] === 'POST') { 8 try { 9 $res = $ajax_processing->post(); 10 header('Content-Type: application/json'); 11 echo json_encode($res); 12 exit; 13 } catch (Exception $e) { 14 header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500); 15 echo $e->getMessage(); 16 exit; 17 } 18}

PHP

1//classについて記入しているコード。今回はPHP・Bとする 2//一応POSTメソッドを記入。データベースの読み込み等は省略します。 3<?php 4 class DB{ 5   public function post(){ 6 switch ($_POST['mode']){ 7 case 'reg'; 8 return $this->registration(); 9 } 10 } 11 12 13 public function registration(){ 14 $sql = "insert into deck_data(name,leader,type,url) values (:name,:leader,:type,:url)"; 15 $stmt = $this->_db->prepare($sql); 16 $stmt->execute(array( 17 ":name"=>$_POST['name'], 18 ":url"=>$_POST['url'] 19 )); 20 21 return[ 22 'id' => $this->_db->lastInsertId() 23 ]; 24 }

自分で行ったこと

ここの部分では、どのような流れで上記のコードになったのかを説明していきます。

1、原因解明
データベースにデータは入力されているので、
・   $res = $ajax_processing->post();
の部分まではうまく行っていると思った。その後の部分に問題があると思い、done(res)以降を「console.log("こんにちは!");」に変更。結果、「こんにちは」は返ってこなかった。fail処理を用意してみたら、failに書いた処理の方が反映された。
→やはりjson形式でうまく返せていないことを確認した。json書き方自体に問題があると分析した。

2、値を代入してみる
そもそもjson形式にする値がないのではないかと仮定した。なので、以下のコードを「$res = $ajax_processing->post();」の上に入れてみた。
$data = array(
"name" => $_GET["name"],
"url" => $_GET['url']
);
結果はターミナルで立てたビルドインサーバーの方に「PHP Notice: Undefined index: name in (データの場所)」というエラーメッセージが出てきた。
→どうしてnameが定義されていないのか理解できなくなり、余計混乱してくる。
※これは「_GET」を「_POST」に変更するだけで大丈夫でした。

3、エラーの検証(未解決)
そもそもエラーが何かを知りたくなったので、エラーを検出するコードをネットから拾って、入力。結果は下になった
・   textStatus : parsererror
・   errorThrown : Unexpected token < in JSON at position 2
どうやらjsonの中にHTMLの形で入ってしまっている?JSONの値の中に「<」というものがあって、それが混乱を招いているということがわかった。
→しかし、json形式で返しているし、どのようにすると「<」取り除かれるのかわからない。どこを改善すればいいのかがわからなくてお手上げ状態。

4、あるサイトを参考(未解決)
ajaxではまった話」こちらのサイトを参考に
echo $res->request->is(['ajax']); …①
を、$this=$ajax_processingの部分に入れてみた。結果、「こんにちは」とは表示された。しかし、「console.log('こんにちは')」の下に「console.log(data)」を入れてみると、「Using $this when not in object context」というエラーが出てしまう。①が結局何かもわからない

主にわからないこと

・そもそもjsで最初に定義した値(「name」や「mode」など)はPHP・Aではどのように使われて、どのようにjson形式で返せばいいのかが理解できない(未解決)
・$resとは何をしているものなのか。そしてjson形式で返ってきた後のdoneで使われているresは同じものなのか、それとも違うものなのか?(解決!今は考えなくて良い)
・json形式から返ってきた際のfunctionの引数が人によって「data」だったりするが、ここに入れる引数はどのようなものなのか?(上に同じ)
・現状どのような問題があってdoneに行けないのか

その他必要な情報があれば随時追記していきます。ajaxの仕組みで理解できていない部分がいくつかあるため、今回のようなミスをしてしまったかもしれないです。もし、ここが理解できていないという部分がありましたら教えていただける人も募集いたします。
お時間を取らせてしまうようですが、よろしくお願いいたします。

※$.postの部分に入れるdataについて
現在、ajax処理を行うために$.postを用いている。そこに「name」と「url」というものがそれぞれあるが、これらをdataに入れた方がいいことは理解している。
しかし、dataにしてしまうとデータベースに反映されなくなってしまう。
なので、現状はこのような形にしているが、もしdataに入れる方法がわかるのであれば教えて欲しいです。
コード
$.post('_Ajax.php,{
data:{
name:name,
url:url
},
mode:"reg",
})~
結果
undifined index:name (場所(PHP・Bの":name"=>$_POST['name'],))
undifined index:name (場所(PHP・Bの))

旧ソースコード(こちらは参考にしなくても結構です。)

js

1$("#registration").on('click',function(){ 2 var name = $('#name').val(); 3 var url = $("#url").val(); 4 $.post('_Ajax.php',{ 5 dataType:'json', 6 name:name, 7 url:url, 8 mode:'reg' 9 }).done(function(res){ 10 console.log("こんにちは!"); 11 }).fail(function(XMLHttpRequest, textStatus, errorThrown){ 12 console.log('失敗'); 13 console.log("XMLHttpRequest : " + XMLHttpRequest.status); 14 console.log("textStatus : " + textStatus); 15 console.log("errorThrown : " + errorThrown.message); 16 }); 17 });

PHP

1//jsから渡ってきた値を処理するコード。今回はPHP・Aとする 2<?php 3require_once('management.php'); 4 5$ajax_processing = new DB(); 6 7//今回はmanagementクラスのインスタンスを作って、post()というメソッドを呼び出す処理を書いている 8if ($_SERVER['REQUEST_METHOD'] === 'POST') { 9 try { 10 11 $res = $ajax_processing->post();//PHP・Bに飛ぶようにプログラミング 12 // jsonであることを知らせている 13 header('Content-Type: application/json'); 14 echo json_encode($res); 15 exit; 16 } catch (Exception $e) { 17 header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500); 18 echo $e->getMessage(); 19 exit; 20 } 21}

PHP

1//classについて記入しているコード。今回はPHP・Bとする 2//一応POSTメソッドを記入。データベースの読み込み等は省略します。 3<?php 4 class DB{ 5   public function post(){ 6 switch ($_POST['mode']){ 7 case 'reg'; 8 return $this->registration(); 9 } 10 } 11 12 13 public function registration(){ 14 $sql = "insert into deck_data(name,leader,type,url) values (:name,:leader,:type,:url)"; 15 $stmt = $this->_db->prepare($sql); 16 $stmt->execute(array( 17 ":name"=>$_POST['name'], 18 ":url"=>$_POST['url'] 19 )); 20 21 return[ 22 'id' => $this->_db->lastInsertId() 23 ]; 24 }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/05/22 01:53

現状解決させたいコードが、質問文中の説明の中でどんどん変わってしまっては、回答する方も追いかけるのに疲弊します。単純の事例に絞ってテストを行い、論点を明確にしてほしいです。
m.ts10806

2019/05/22 02:03 編集

>仮定した 仮定よりも「確定」させる必要があると思います。 デバッグして確認してみてください(特にPOST情報のダンプ)
Beronika

2019/05/22 02:15

m6uさん 「自分で行ったこと」は、無視しても構いません。どのように変更していったのかが知りたい人に向けて流れを説明しようとしました。 とはいえ、簡易的な流れの説明を最初におくべきだったと思います。以後、今回の意見を参考に質問投稿をします。 mts10806さん いつも回答ありがとうございます。 仮定・推測と書いている部分は実証を行っています、結果をうまくかけていないので、後ほど追記で記入します。
mepon

2019/05/22 04:19

コードについては実際に検証したものを正しく書いてください。 > そもそもは以下のようなコードを書いていた。 この部分のjavascriptではleaderとtypeがvarで宣言されているのに送信していない。 先頭にある恐らく修正したjavascriptではleaderとtypeがそもそも宣言されていないのに送信している。 どれが正しいのでしょうか
Beronika

2019/05/23 00:48

自分のミスです。もともと4つの項目があったのですが、よりシンプルにするために2つにしました。 コードを修正いたします。
mepon

2019/05/27 13:45

まだ解決していらっしゃらなかったんですね。 追記分を見ました。 console.logの件については「res」で受け取っているのに「data」だと何も出ないのは当然かと思います。 is~~についてはリクエストが非同期通信であるかどうかの確認です。 ですのであまり関係ないと言えばないかと。 以下お願いです。 ①コードは最新のものに更新してください。(できれば元のソースもそのままで) ②postデータをdataに格納して送信して失敗した時のコードも提示してください。
Beronika

2019/05/27 23:54

承知いたしました。 編集いたします。
guest

回答6

0

dataがないから送信してないのではないかと。
とはいえ、typeとかurlとかどこからくるデータなのかなってのは懸念事項としてあるので、
そこはご随意に。

$.post('_Ajax.php',{ dataType:'text', data: { name:name, leader:leader, type:type, url:url, mode:'reg' }

私が参考にするやり方:
JavaScript(jQuery)からPHPのAPIを利用する - Qiita

投稿2019/05/22 01:50

編集2019/05/22 01:55
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Beronika

2019/05/22 02:37

実際に試してみました。 するとconsoleから以下のエラーメッセージが 「PHP Notice: Undefined index: name in (場所)」 nameの部分が定義されていないとなっています。 formは別のファイルに書いています。htmlを用いて、formを使って <form> <input id = "name" type = "text"> <input id = "url" type = "text"> </form> <div id = "registration">登録</div> という感じです。
退会済みユーザー

退会済みユーザー

2019/05/22 03:12

そのコメントは、「ここから先はどうしていいかわからないのでデバッグに最後まで付き合ってくれませんか」とおっしゃっているように受け取れますが、相違ありませんか? ここはペアプログラミングまでしなきゃいけない場ではないと思っていたのだけど。 POST送信できて、データの送信はJSON形式を使って、PHP側もJSONをデコードして処理した結果をJSON形式で返すようにすれば、大概うまくいきます。 jQueryからtext形式で送ることができても、phpから応答するデータをjQuery側で処理しやすい形がJSON形式であるべきなので、であれば送信するときもJSONでやればって。 (今は業務忙しいので、他の方の回答で進められそうならそっちに乗っかってください。)
guest

0

どうしてnameが定義されていないのか理解できなくなり、余計混乱してくる。

POSTで送っているのに$_GET["name"]で取得しようとしているから。

投稿2019/05/23 03:53

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Beronika

2019/05/27 11:05

こちらの回答のおかげでnameは定義されるようになりました。ありがとうございます!
guest

0

たぶんdataType:'JSON',にしたほうがいいんじゃないかなと。
headerにもそう指定していますし、JSONで取得したいようですし。
Unexpected token < in JSON というのはJSON形式として正しくない時に出るエラーの筆頭ですし。
もちろんException 拾った時のheaderもJSONで送信したほうが良いです。

jQuery.ajax(options)

dataType / string

サーバから返されるデータの型を指定します。省略した場合は、jQueryがMIMEタイプなどを見ながら自動的に判別します。指定可能な値は、次のようなものです。
"xml": XMLドキュメント
"html": HTMLをテキストデータとして。ここにscriptタグが含まれた場合、処理は実行されます。
"script": JavaScriptコードをテキストデータとして。cacheオプションに特に指定が無ければ、キャッシュは自動的に無効になります。リモートドメインに対するリクエストの場合、POSTはGETに変換されます。
"json": JSON形式のデータとして評価し、JavaScriptのオブジェクトに変換します。
"jsonp": JSONPとしてリクエストを呼び、callbackパラメータで指定した関数に呼び戻された値をJSONデータとして処理します。(jQuery 1.2より追加)
"text": 通常の文字列。
dataTypeを指定する際は、幾つかの注すべき点があります。後述の注意1,2も参照して下さい。

投稿2019/05/22 02:05

編集2019/05/22 02:26
m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Beronika

2019/05/22 02:38 編集

間違いないです。jsonで返したい以上、jsonにするべきですね。 経緯だけ述べますと、jsonでそもそも返っていないから反映されないのではと推測し、textに変えてみました。結果としては変化なしなので、その部分は問題ないとしました。
m.ts10806

2019/05/22 02:26

>jsonで返したい以上、textにするべきですね。 JSONで返したい以上、JSONにするべき・・の間違いでは?
m.ts10806

2019/05/22 02:27

もう少し簡単なコードで試したほうがいいですね。 送るときはdata何も送らず、返す時はJSON形式で{result:"OK"}のみ返すとか。次に固定値送ってその固定値をそのままJSONに入れこんで返すとか。
Beronika

2019/05/22 02:41 編集

わかりました。試してみます。 textの部分は変更しました。
guest

0

POSTするにはjqueryの仕様に沿った書き方が必要です。
リンク先見ればわかるけど、以下のサンプルコードが書いてあります。dataの部分がパラメーターを書くところです。

$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });

・doneの部分に行くためにはどのようにすればいいのか

リクエストに成功すること(レスポンスをうけとること)

・json形式から返ってきた際のfunctionの引数が人によって「data」だったりするが、ここに入れる引数はどのようなものなのか?

そういうお作法だと思って気にしなくていいです
自力で難しめのjavascript書けるようになった頃にはわかると思うので

投稿2019/05/22 01:58

hentaiman

総合スコア6389

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Beronika

2019/05/22 02:26

回答ありがとうございます。 ・書き方について $ajaxでも試したのですが、余計混乱してしまったこと、ドットインストールでは$postを利用していたため、ドットインストールで習った書き方にしました。 ネット上ではpostの書き方でも問題がないと書いていましたが、ajaxにするメリットがあるのでしょうか? ・doneの部分に行くためには… 申し訳ございません。説明が少なすぎました。doneに行く方法はわかります。現状のどこが間違えていて、リクエストに失敗しているのかについて知りたいです。 ・json形式から… ありがとうございます。では、ここには何を入れてもいいということなのでしょうか?(現状のresでも、引数の文字を変えてdataにしても大丈夫なのか?)
hentaiman

2019/05/22 02:34

$.postでもいいですよ、リンク先の下の方に書き方書いてありますよ。 個人的な考えですが一番大きなメリットは、公式が前面に出しているお作法を真似できるってことです。公式ドキュメントでは$.ajaxの書き方を優先して書いてますよね?同じ結果を出せるやり方で一番最初に書いてあるぐらいだし。 dataにしてもいいです。むしろ公式の真似してdataにした方が比較確認しやすいでしょう。 どこが間違えているかですが、もっとも初歩的なやり方としてtry~catchはせずに1ステップ毎にechoしていけばいいでしょう。処理が途中で止まってるかどうか分かるでしょ?
Beronika

2019/05/22 02:45

把握ミスでした。ありがとうございます。 メリットの回答もありがとうございます。 まずは1つずつのステップで解決していこうと思います。わかり次第、詰り次第質問をします。
hentaiman

2019/05/28 01:04

編集後のコードとコメント見ましたが、failに入っているならphp側はcatchの方に入ってしまってますよ。 post()とregistration()の動作をもう一度1ステップずつ確認してくのがいいと思います。 仮に $res = $ajax_processing->post(); の部分を $res = [1,2,3];とでもすればそのまま処理されるのでjavascript側はdoneに入る。
guest

0

自己解決

やっと解決しました。みなさんご協力ありがとうございます。

自分が問題と思っていなかった部分が問題でした。PHP-Aのソース「require_once('management.php');」の前にデータベースの定義を行うphpファイルがあったのですが、phpを書く際に使う「?>」が反応してしまいうまく結果が返されなかったようです。
「<?php」のみにしてみたら解決できました。

また、PHP-Bのarrayで囲んだ部分も書き方がよくなかったので、[]に変更。結果、データベースに表示されてかつサイトに反映されるプログラミングがかけました。

投稿2019/06/04 07:03

Beronika

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/06/04 07:30

下記の記事の https://qiita.com/tadsan/items/fb496e450fc27c8c4494 「テンプレートとロジックは分けろ」を参照してください。 PHPタグで囲われていない部分は全て出力になるので、何も出力することがないのでしたら?>は書く必要はないです。
guest

0

「PHP Notice: Undefined index: name in (場所)」

というNoticeを吐くのであればphpのprint(もしくは参照)箇所を
tryしておきて、catchされたときはエラーヘッダを返すことです

sample

  • hoge.php

PHP

1set_error_handler('myErrorHandler'); 2function myErrorHandler($errno, $errstr, $errfile, $errline){ 3 switch($errno) { 4 case E_NOTICE: 5 throw new exception("notice:".$errstr); 6 break; 7 default: 8 return false; 9 } 10 return true; 11} 12 13try{ 14 print $a; 15}catch(exception $e){ 16 header('HTTP/1.1 400 Bad Request'); 17 //header('HTTP/1.1 500 Internal Server Error'); //エラー番号は適当に 18 print $e->getMessage(); 19}

これを以下のajax処理で参照するとよいです

javascript

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 $.ajax({ 5 "url":"hoge.php", 6 }).done(function(data){ 7 console.log(data); 8 }).fail(function(xhr,err){ 9 console.log(err); 10 }); 11}); 12</script>

hoge.phpはエラーヘッダをつけて返してくるのでfailにデータは流れます

投稿2019/05/22 09:54

yambejp

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問