nicepaper @ ウィキ
nicepaper @ ウィキ
「PHPでajax通信入門1」の編集履歴（バックアップ）一覧に戻る

PHPでajax通信入門1 - (2015/10/22 (木) 00:03:27) のソース

PHPでajax通信するための基本の流れについて説明していきます。10月20日記事
~
~
目次
#contents
~
~
----
~
*順序
+jQueryを読み込む
+フォームでidを指定する。(name属性は記述しない）
+実行したときのidも記述し、それをscriptコードを書いていく。
+ajaxメソッドを使って記述する。
+記述する方法はurl,type,dataType,dataを記述
+dataのところにname属性の名前とそのデータのvalueを記述する。
+成功したときと失敗したときの対応を記述
~
~
*コード
**index.php
 <!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="utf-8">
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 <script type="text/javascript">
 $(function () {
     $('#execute').click(function () {
         // Ajax通信を開始する
         $.ajax({
             url: 'ajax.php',//失敗時の対応も確認するためにajax1.phpとかに変えてみてください。
             type: 'post', 
             dataType: 'json',//json形式で記述するよう指示 
             data: { 
                 id : $('#loginid').val(),//phpの場合name="id"と書くがajaxではdataにpostの名前を書く。
                 passwd : $('#loginpass').val()
             }
         })
 		//成功したとき
         .done(function (response) {
             $('#result').val('受信成功');
             $('#resultidpass').val(response.data);//結果を返してもらう場合はresponse.配列名
         })
 		//失敗したとき
         .fail(function () {
             $('#result').val('失敗');
             $('#resultidpass').val('失敗');
         });
     });
 });
 </script>
 <title>IDとパスワードのajax通信</title>
 </head>
 <body>
 <p>
 	id: <input type="text" id="loginid"><br>
 	password: <input type="text" id="loginpass"><br>
     <input type="button" id="execute" value="送信"><br>
 </p>
 <p>
    status: <input type="text" id="result" value=""><br> 
    idとpassword: <input type="text" id="resultidpass" value=""><br>
 </p>
 </body>
 </html>
**ajax.php
 <?php
 header('Content-Type: application/json');//json形式で書く。
 
 //とりあえずIDとパスワードの結果を返す。データベースで色々いじれるがまずは表示
 $data = "IDは{$_POST['id']}、パスワードは{$_POST['passwd']}です";
 echo json_encode(compact('data'));
 ?>
~
~
*まとめ
ajaxの通信ではhtmlにおいてフォームで<form>やname=というものは書かなくてもよく、javascriptで処理します。
またajaxメソッドはjson形式で記述していきます。あとは失敗したときと成功したときの対応を書いていきます。
また、セキュリティは度外視しています。ご了承ください。