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

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

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

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

JavaScript

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

Ajax

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

Q&A

解決済

3回答

283閲覧

ajaxの結果をjs変数として受け取る方法

SugiuraY

総合スコア317

PHP

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

JavaScript

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

Ajax

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

0グッド

0クリップ

投稿2018/10/23 13:12

編集2018/10/24 04:34

下記のようにajaxでデータベースにアクセスしユーザ入力情報がDBに既に登録されていないかを
チェックしたいと考えております。

confirm.phpで取得した値に基づき、
if (result=="usedname"){
//使用済みのユーザ名の場合の処理
}else if{
//未使用のユーザー名の処理
}

としたいのですが、"<script> const result = usedname <script>"
をheadにappendしてもif判定の時点でまだ読み込まれていないためresultがundefined
扱いになってしまいます。

  1. 受け取った値をindex.phpの非同期通信成功時に変数として処理したいのですがどのように受け渡せば良いのでしょうか?
  2. それとは別にajaxでデータベースに既登録情報のチェックという意味でより実務的にこうすべき、またはこれが一般的という方法があれば合わせてアドバイスをいただければ嬉しいです。

*コードを修正しました

php

1//index.php 2$(function(){ 3errCode[]="" 4 $(document).on('click','.button',function(){ 5 $.ajax({ 6 type:'POST', 7 url:'confirm.php', 8 datatype:'json', 9 data:{ 10 transfer_name:username 11 } 12 }) 13 .then( 14 function(data){//success 15     console.log(result)// {"status":false} 16 console.log(result.status)// undefined 17 if (result) { 18 errCode.push("usedname") 19 $('#er').remove(); 20 $('<p id="er" class="errmessage">すでに使用されているユーザ名です</p>').appendTo('.errmessagebox').hide().fadeIn(1000); 21 }else{ 22 $('#er').remove(); 23 } 24 }, 25 function(){//fail 26 console.log('...failed'); 27 } 28 ) 29 }) 30})

php

1//confirm.php 2 3<?php if ($_POST['transfer_name']): ?> 4 <?php include('./z_common_pdo.php');?> 5 <?php 6 try{ 7 $pdo->beginTransaction(); 8 try{ 9 $stmt = $pdo->prepare('SELECT * FROM user_table where username=:uname'); 10 $stmt->bindParam(':uname',$_POST['transfer_name'],PDO::PARAM_STR); 11 $stmt->execute(); 12 13 $result=$stmt->fetch(PDO::FETCH_ASSOC); 14 $pdo->commit(); 15 }catch(PDOException $e){ 16 $pdo->rollback(); 17 throw $e; 18 } 19 }catch(PDOException $e){ 20 exit('データベース接続失敗。'.$e->getMessage()); 21 } 22 ?> 23 <?php 24 echo json_encode(["status"=> $result]); 25 ?> 26<?php else:?> 27 <p>無効な処理です、リダイレクトします</p> 28<?php endif;?>

スクリーンショット
ScreenShot

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

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

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

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

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

guest

回答3

0

ベストアンサー

そもそもですが、ajaxの使い方、間違ってます。
dataType:jsonで呼び出したのでしたら、
呼び出されるサーバーサイドのプログラム(今回はPHP)の最後の出力は、それにあわせた、JSON形式でなければなりません。
非同期通信で処理が行われた結果を「文字列として出力」されたものを呼び出し元のJavaScriptに返します。
呼び出されたサーバーサイドのプログラムに幾らJavaScriptを書いてもdataTypeにそぐわない内容でしたらそれは不正な形式と捉えられても仕方ありません。

success時に受け取っているdataをconsole.log()で出力してみると良いです。

dataType:jsonで呼び出したのでしたら、サーバーサイドの処理は、例えば配列に返したい情報を詰め込んでjson_encode()したものをechoするだけになります。

投稿2018/10/23 14:17

m.ts10806

総合スコア80765

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

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

SugiuraY

2018/10/24 00:07

コメント有難うございます。 失礼しました、json_encodeを失念しておりました。 ただ、少し不可思議な現象が起きているのですが、 以下のようにajaxの結果を連想配列で取得して、dataでは正しく配列を取得しているようですが data.resにするとundefinedとなってしまいます。 ajax上の問題なのか分からずに、重ねて申し訳ございません。 //confirm.php <?php if ($result) { $rs = array("res"=>"usedname") }elseif($result==false){ $rs = array("res"=>"non_usedname") header(Content-type:application/json; charset=utf-8) echo json_encode($rs); }?> //index.php .then( function(data){//success console.log(data) //{"res":"usedname"} console.log(data.res) // undefined } )
m.ts10806

2018/10/24 00:19

dataTypeをjsonにしてるなら headerでjson宣言しなくていいような。
SugiuraY

2018/10/24 03:11

コメントありがとうございます。 いずれにおいてもdata.resでundefinedをなぜか返してきます。。 console.log(data) //{"res":"usedname"}ではあるのですが、、理由がわかりません。。
m.ts10806

2018/10/24 03:26

コンソールの画面キャプチャ添付していただいて良いですか? あと現在のコードを質問本文に追記してください。 実際にコメントの通りだとするとheaderのところでエラーでるはずですし、再現確認を行いたいので
SugiuraY

2018/10/24 03:49

スクリーンショットを追加いたしました。 少しきになる点は連想配列の前の部分に空白のスペースが生じている点です。
m.ts10806

2018/10/24 03:54

これ、連想配列じゃなくてそういう文字列ですね。 またjson_encodeはphpなのでphpコードとして扱ってください。 エラーの場合も同様。 というか、json出力しかないので?>で閉じる必要はありません。 <?php ?> 以外のところはそのまま出力されます。改行コード入ってたらそのまま出るので正しくjsonを返せません
SugiuraY

2018/10/24 04:01

本当に申し訳ございません、文字列出力されていることはわかったのですが、 「json_encodeはphpなのでphpコードとして扱ってください。」 というのは具体的にどうすべきかがわからず、ご教示頂けますでしょうか、confirm.php側の問題でしょうか? 重ねてご迷惑をお詫び申し上げます。
m.ts10806

2018/10/24 04:03

<?php ?>の枠から出てますよ。↓ } ?> echo json_encode(["status"=> $result]); <?php else:?>
SugiuraY

2018/10/24 04:35

大変失礼致しました、転記ミスで実際には修正後のコードの通り、php処理された上で症状が起きております。申し訳ございません。
m.ts10806

2018/10/24 04:38

としたら既にコメントした下記です。 >というか、json出力しかないので?>で閉じる必要はありません。 <?php ?> 以外のところはそのまま出力されます。改行コード入ってたらそのまま出るので正しくjsonを返せません
SugiuraY

2018/10/24 04:41

なるほど、有難うございます。 目下、コードに触れる環境からはなれてしまたっため、php以外で囲まれている部分について 改行や空白等の有無を速やかに確認してみます。
m.ts10806

2018/10/24 04:43

↓こうなっている時点で改行コード発生してます。 <?php ~?> <?php ~?>
SugiuraY

2018/10/24 04:47

コメント有難うございます。 危なかったです、それは全く認識がありませんでした。 ともすれば、別構文自体使用することはできないですね。続けて1行で書けばその限りではないのかもしれませんが。 そもそもですが、JSON出力するということは、{}以外の部分は当然に無視されるものと誤解をしておりました。
SugiuraY

2018/10/24 04:50

httpヘッダに直接JSONを書いて、ajaxの結果で受取るといった処理ができれば良いのですが、ajaxの仕組みはそうではないのですね、、、
m.ts10806

2018/10/24 04:52

>ともすれば、別構文自体使用することはできないですね。続けて1行で書けばその限りではないのかもしれませんが。 はい。画面出力が限定的であれば?>は一切必要ありません。 ※限定的でなくても無用な改行が出力されることになるので、普段でも不要な場面は多いです。 > JSON出力するということは、{}以外の部分は当然に無視されるものと誤解をしておりました。 改行ひとつ、空白ひとつで「JSON形式」は崩れます。json_encode()の逆、json_decode()とかちょっと間違ってるだけで正しい情報返してくれませんからね・・・ これも「型」なのでそれなりにデリケートなものです。
SugiuraY

2018/10/26 03:15

遅くなりました、無事JSON出力することで、解決することができました。 空白、改行が原因でした。。 お力添え、ありがとうございます。
m.ts10806

2018/10/26 03:28

解決されたようで何よりです
guest

0

usednameかnone_usednameみたいなリテラルじゃなく
単純にステータス true(データがあった場合) false(データがなかった場合)で返すだけにした方がいいかと思います。

$reslt が判定だとしてstatusに値を入れて
json_encode(['status' => $reslt ]);

js

1js側では 2 3.then( 4 function(data){//success 5 if (data.status) { 6 errCode.push("usedname") 7 $('#er').remove(); 8 $('<p id="er" class="errmessage">すでに使用されているユーザ名です</p>').appendTo('.errmessagebox').hide().fadeIn(1000); 9 }else { 10 $('#er').remove(); 11 } 12 }, 13

投稿2018/10/24 00:14

ms5025

総合スコア292

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

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

SugiuraY

2018/10/24 03:19

コメントありがとうございます。確かに真偽型さえ取得できれば問題ないので、おっしゃる方法が適切かと思います。 実際に動作を確認したのですが、 //前略 if (data.status) { errCode.push("usedname") $('#er7').remove(); $('<p id="er7" class="errmessage">すでに使用されているユーザ名です</p>').appendTo('.errmessagebox').hide().fadeIn(1000); }else{ $('#er7').remove(); errCode.splice(errCode.indexOf("usedname"),1); } }, //後略 は正しく処理されず、 console.log(data);で 名前が既に存在している時は {"status":{"username":"\u5c71\u7530"}} で名前が存在しない時は {"status":false} でした、したがって、logの出力結果だけ見れば、適切に処理されるべきはずなのですが、 根本的な部分を見落としているのかもしれません、、
ms5025

2018/10/24 04:39

取得したユーザ名も呼び出し側で必要となるのですね。 だとしたら リターン値はusernameだけでもいいとは思いますが、 エラー判定の為にステータスとusername両方リターンしてもいいかもしれません。 //ユーザがある場合 $result=array(); $result[’status’]=true; $result[’username’]='u5c71\u7530';←取得したユーザ名 //ユーザがない場合 $result[’status’]=false; $result[’username’]='';←空 echo json_encode($result); 戻り値の形と内容は統一してください。 js側は .then( function(data){//success if (data.status) { errCode.push(data.username") $('#er').remove(); $('<p id="er" class="errmessage">すでに使用されているユーザ名です</p>').appendTo('.errmessagebox').hide().fadeIn(1000); }else { $('#er').remove(); } }, でいけると思います。 見当違いだったらすいません。
guest

0

下記のソースコードの中で resultがどこから来ているのか不明ですがajaxの返り値であればdataに入ってくるのではないでしょうか?

js

1 .then( 2 function(data){//success 3 if (result=="usedname") {

下記の記事に、PHPとJQueryのajax使った例がありますので、データ受け渡しについては参考になるのではないかと思います。

Qiita-はじめてのAjax(jQuery) 2018年版

投稿2018/10/23 14:21

euledge

総合スコア2404

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

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

m.ts10806

2018/10/23 14:38

> resultがどこから来ているのか不明ですが confirm.phpのechoの中に・・・
SugiuraY

2018/10/23 22:46

コメント有難うごさいます。 resultの出どころはmts10806様のコメントの通りです。 dataに入ってくるのは、出力されたHTML結果であったため、js変数としての取得方法を検討していた、次第でございます
euledge

2018/10/23 23:01

mts10806さんの回答の通り、phpからjsonを返すというのが良いと思います。
SugiuraY

2018/10/24 00:08

euledge様 コメント有難うございます。ご指摘の通りでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問