ajaxの基礎「.get() .post() .load()」POSTでデータを送る Part3

POST「.post() 」でデータを送ってみる

見たところGETと変わらなさそうですが、参考を元に作成して試してみました。

＜HTML＞

<p><label>名前<input type="text" name="name" value=""></label></p>
<p><label>電話<input type="tel" name="tel" value=""></label></p>
<p>
 <label>
 年齢
 <select name="age">
 <option value="10代">10代</option>
 <option value="20代">20代</option>
 <option value="30代">30代</option>
 <option value="40代">40代</option>
 <option value="50代">50代</option>
 </select>
 </label>
</p>
<p>
 <label>男<input type="radio" name="sex" value="男"></label>
 <label>女<input type="radio" name="sex" value="女"></label>
</p>
<p>
 <label>同意<input type="checkbox" name="doui" value="同意"></label>
</p>
<input type="hidden" name="hidden" value="隠しデータ">
<input type="button" value="登録">
<div></div>

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function() {

$("[type=button]").on("click", function() {

$.post("postdayo1.php", {
 name : $("input[name=name]").val(),
 tel : $("input[name=tel]").val(),
 age : $("select").val(),
 sex : $("input[name=sex]:checked").val(),
 doui : $("input[name=doui]:checked").val(),
 hidden : $("input[name=hidden]").val()
 }, function(data) {
 $("div").text(data.message);
 });

});

});
</script>

＜PHP＞

<?php
// 受け取った値を処理する
$name = $_POST["name"];
$tel = $_POST["tel"];
$age = $_POST["age"];
$sex = $_POST["sex"];
$doui = $_POST["doui"];
$hidden = $_POST["hidden"];

if($doui == null){
 $data["message"] = "同意してください。";
}else{
 $data["message"] = "登録しました。";
}

header('Content-Type: application/json; charset=utf-8');
echo json_encode($data);