jQueryでPOST通信する例文

アンカーをクリックするとPOST送信

<script type="text/javascript">
<!--

$(function(){
 $("a.class_test").click(function(){ return TestEvent(this); });
});

function TestEvent( obj ) {
 document.forms[0].submit();
 return false;
}

//-->
</script>

<?php

echo $_POST["name_test"];

?>

<a href="<?php echo $_SERVER['PHP_SELF']; ?>" class="class_test">クリック</a>

<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="name_test" value="あいうえお">
</form>


※「document.forms[0]」の数値は、formの番号。formの記述順に0からカウント
※「action」の値を変えれば、該当ページへジャンプできる
※POST送信されるのは、input要素のvalue値

アンカーをクリックするとジャンプ先（＝href内）をPOST送信

<script type="text/javascript">
<!--

$(function(){
 $("a.class_test").click(function(){ return TestEvent(this); });
});

function TestEvent( obj ) {
 document.forms[0].elements["name_test"].value = $(obj).attr("href");
 document.forms[0].submit();
 return false;
}

//-->
</script>

<?php

echo $_POST["name_test"];

?>

<a href="test.php" class="class_test">クリック</a>

<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="name_test" value="あいうえお">
</form>

※form内とパラメータが衝突した場合、href内が優先
※「action」の値を変えれば、該当ページへジャンプできる

フォームの名前を指定し、アンカーをクリックするとジャンプ先（＝href内）をPOST送信

<script type="text/javascript">
<!--

$(function(){
 $("a.class_test").click(function(){ return TestEvent(this); });
});

function TestEvent( obj ) {
 document.forms["form_name"].elements["name_test"].value = $(obj).attr("href");
 document.forms["form_name"].submit();
 return false;
}

//-->
</script>

<?php

echo $_POST["name_test"];

?>

<a href="10" class="class_test">クリック</a>

<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="form_name">
<input type="hidden" name="name_test" value="あいうえお">
</form>

※form要素内にnameでフォーム名を記述し、「document.forms["form_name"]」のように指定

セレクトメニューを選択すると、option value の値をPOST送信

<script type="text/javascript">
<!--

$(document).ready(function(){
 $("div.abc select").change(function(){ focusByCustomer(this); });
});

function focusByCustomer( obj ) {
 document.forms["form_name"].name_test.value = $(obj).val();
 document.forms["form_name"].submit();
}

//-->
</script>

<?php

echo $_POST["name_test"];

?>

<div class="abc">
<select name="name_test">
<option value="">限定しない</option>
<option value="aiueo">あいうえお</option>
<option value="kakikukeko">かきくけこ</option>
</select>
</div>

<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="form_name">
<input type="hidden" name="name_test" value="ダミー">
</form>

セレクトメニューを選択すると、ジャンプ

<script type="text/javascript">
<!--

$(document).ready(function(){
 $("div#select1 select").change(function(){ focusByPlan(this); });
});

function focusByPlan( obj ) {
 var the_URL = "../" + $(obj).val() + "/";
 location.href = the_URL;
}

//-->
</script>


<div id="select1">
<select>
<option value="a">あいうえお</option>
<option value="k">かきくけこ</option>
<option value="s">さしすせそ</option>
<option value="t">たちつてと</option>
</select>
</div>