nicepaper @ ウィキ
nicepaper @ ウィキ

PHPでajax通信するための基本の流れについて説明していきます。10月20日記事

目次




順序

  1. jQueryを読み込む
  2. フォームでidを指定する。(name属性は記述しない）
  3. 実行したときのidも記述し、それをscriptコードを書いていく。
  4. ajaxメソッドを使って記述する。
  5. 記述する方法はurl,type,dataType,dataを記述
  6. dataのところにname属性の名前とそのデータのvalueを記述する。
  7. 成功したときと失敗したときの対応を記述

コード

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形式で記述していきます。あとは失敗したときと成功したときの対応を書いていきます。 また、セキュリティは度外視しています。ご了承ください。

「PHPでajax通信入門1」をウィキ内検索
最終更新：2015年10月22日 00:03