トップページ >  Ajax >  フォームデータをページを更新せず送信する
初版2009/08/11： 最終更新日2009/08/11
フォームデータをページを更新せず送信する
目次
・フォームデータをページを更新せず送信する
・サンプルソース
・実行例
フォームデータをページを更新せず送信する
通常のウェブページのフォームではデータを送信する際にページの遷移、再読込が発生してしまいます。
Ajaxでは、データを送信する度にページが更新されては困るので、非同期の通信を用いてデータを送信します。

データをPOSTするのに使うメソッドは$.post()です。
serialize()は、フォーム要素のメソッドで、入力されたデータをname=value&name=value...という形式にシリアライズして返します。
実行例
<html>
<head>
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript">
$(document).ready(function(){
    $("#form1").submit(function(){
        $.post( "postsample.php", $(this).serialize(), function(response){
            alert(response);
        } );
        return false;
    });
});
</script>
</head>
<body>
<form id="form1">
    名前: <input type="text" name="name"><br>
    メッセージ: <input type="text" name="message"><br>
<input type="submit" value="送信">
</form>
</body>
</html>
実行例
名前:
メッセージ:
HOME