PHPでajax通信するための基本の流れについて説明していきます。10月20日記事
目次
<!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>
<?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形式で記述していきます。あとは失敗したときと成功したときの対応を書いていきます。 また、セキュリティは度外視しています。ご了承ください。