Ajaxをphpとjquery(html)を使用して実行してみた

htmlを使用したAjaxリクエスト実装(クライアント)

<!DOCTYPE html>
<html lang="ja">
	<head>
	  	<meta charset="utf-8" />
	  	<title>jQuery & Ajax & PHP Sample</title>
 
	  	<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
		<script>
			$(document).ready(function()
			{
    		/**
    	 	* 送信ボタンクリック
    	 	*/
    		$('#send').click(function()
    		{
        		//POSTメソッドで送るデータを定義します var data = {パラメータ名 : 値};
        		var data = {request : $('#request').val()};
 
        		/**
         		* Ajax通信メソッド
         		* @param type  : HTTP通信の種類
         		* @param url   : リクエスト送信先のURL
         		* @param data  : サーバに送信する値
         		*/
        		$.ajax({
            		type: "POST",
    			url: "send.php",
            		data: data,
            		/**
            	 	* Ajax通信が成功した場合に呼び出されるメソッド
            	 	*/
            		success: function(data, dataType)
            		{
    			//successのブロック内は、Ajax通信が成功した場合に呼び出される
 
    			//PHPから返ってきたデータの表示
    			//alert(data);
	    		$('#info').text(data);
            		},
            		/**
            		* Ajax通信が失敗した場合に呼び出されるメソッド
    			*/
            		error: function(XMLHttpRequest, textStatus, errorThrown)
            		{
                		//通常はここでtextStatusやerrorThrownの値を見て処理を切り分けるか、単純に通信に失敗した際の処理を記述します。
 
                		//this;
                		//thisは他のコールバック関数同様にAJAX通信時のオプションを示します。
 
                		//エラーメッセージの表示
                		alert('Error : ' + errorThrown);
            		}
        		});
         
        		//サブミット後、ページをリロードしないようにする
        		return false;
    		});
		});
		</script>
	</head>
	<body>
			<h1>jQuery & Ajax & PHP Sample</h1>
			<form method="post">
    			<p><input type="text" id="request"></p>
    			<p><input id="send" value="送信" type="submit" /></p>
			</form>
		<span id="info">
	</body>
</html>

phpを使用したAjaxレスポンスの実装(サーバサイド)

<?php
header("Content-type: text/plain; charset=UTF-8");
if (isset($_POST['request']))
{
	//ここに何かしらの処理を書く(DB登録やファイルへの書き込みなど)
	echo $_POST['request'];
}
else
{
	echo 'The parameter of "request" is not found.';
}
?>


Published

31 May 2015

Tags