$.ajaxを使った簡単なPOST送信とレスポンスの受け取り

jQuery

index.html

<html>
	<head>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(function(){
				$('#sw').click(
					function(){
						$.ajax({
							type: 'post',
							url: 'post.php',
							data: {
								'pd': 'nandeyanen'
							},
							success: function(data){
								alert(data);
							}
						});
					}
				);
			});
		</script>
	</head>
	<body>
		<a href="javascript: void(0)" id="sw">switch</a><br />
	</body>
</html>

post.php

<?php
	print 'your post data is '.$_POST['pd'];
?>

$.ajaxの引数は1個だけ。オブジェクトを渡す。typeをpostにするとpost送信になる。urlはpost先のURLを指定。dataはpostするパラメーター。successは成功後に実行する関数。この関数の引数にレスポンスが入る。ここではdataにレスポンスが入っている。つまりこのサンプルの実行結果は下記になる。

print 'your post data is nandeyanen

※この記事はCodaholicで記事化しています。

http://blog.t-szk.com/?p=716