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

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

ただいまの
回答率

87.95%

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

解決済

回答 3

投稿 編集

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

score 250

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

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

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

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

*コードを修正しました

//index.php
$(function(){
errCode[]=""
 $(document).on('click','.button',function(){
   $.ajax({
      type:'POST',
      url:'confirm.php',
      datatype:'json',
      data:{
        transfer_name:username
      }
     })
     .then(
       function(data){//success
     console.log(result)//       {"status":false}
         console.log(result.status)// undefined
         if (result) {
           errCode.push("usedname")
           $('#er').remove();
           $('<p id="er" class="errmessage">すでに使用されているユーザ名です</p>').appendTo('.errmessagebox').hide().fadeIn(1000);
         }else{
           $('#er').remove();
         }
       },
       function(){//fail
         console.log('...failed');
       }
     )
 })
})
//confirm.php

<?php if ($_POST['transfer_name']): ?>
  <?php include('./z_common_pdo.php');?>
  <?php
      try{
            $pdo->beginTransaction();
                        try{
                         $stmt = $pdo->prepare('SELECT * FROM user_table where username=:uname');
                         $stmt->bindParam(':uname',$_POST['transfer_name'],PDO::PARAM_STR);
                         $stmt->execute();

                         $result=$stmt->fetch(PDO::FETCH_ASSOC);
                         $pdo->commit();
                        }catch(PDOException $e){
                         $pdo->rollback();
                         throw $e;
                        }
        }catch(PDOException $e){
            exit('データベース接続失敗。'.$e->getMessage());
        }
   ?>
 <?php
   echo json_encode(["status"=> $result]);
 ?>
<?php else:?>
  <p>無効な処理です、リダイレクトします</p>
<?php endif;?>


スクリーンショット
ScreenShot

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+4

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/24 13:52

    >ともすれば、別構文自体使用することはできないですね。続けて1行で書けばその限りではないのかもしれませんが。

    はい。画面出力が限定的であれば?>は一切必要ありません。
    ※限定的でなくても無用な改行が出力されることになるので、普段でも不要な場面は多いです。

    > JSON出力するということは、{}以外の部分は当然に無視されるものと誤解をしておりました。

    改行ひとつ、空白ひとつで「JSON形式」は崩れます。json_encode()の逆、json_decode()とかちょっと間違ってるだけで正しい情報返してくれませんからね・・・
    これも「型」なのでそれなりにデリケートなものです。

    キャンセル

  • 2018/10/26 12:15

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

    キャンセル

  • 2018/10/26 12:28

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

    キャンセル

0

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

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/23 23:38

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

    キャンセル

  • 2018/10/24 07:46

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

    キャンセル

  • 2018/10/24 08:01

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

    キャンセル

  • 2018/10/24 09:08

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

    キャンセル

0

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

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

js側では

.then(
       function(data){//success
         if (data.status) {
           errCode.push("usedname")
           $('#er').remove();
           $('<p id="er" class="errmessage">すでに使用されているユーザ名です</p>').appendTo('.errmessagebox').hide().fadeIn(1000);
         }else {
           $('#er').remove();
         }
       },

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/24 12: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の出力結果だけ見れば、適切に処理されるべきはずなのですが、
    根本的な部分を見落としているのかもしれません、、

    キャンセル

  • 2018/10/24 13: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();
    }
    },

    でいけると思います。
    見当違いだったらすいません。

    キャンセル

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

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

関連した質問

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