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