例えば、バリデーションをさせてから問題がなければ、submitを実行してデータを送信するといった場合です。
その他にも状況に応じて、送信するデータを変更したい場合などにも有効かもしれません。
送信ボタンが押された後、jQueryでデータを生成してから、form送信する方法です。
フォームの二重送信対策にも有効かもしれません。
応用すれば、<a>要素をクリックすることで、POST送信することも可能だと思います。
画像を添付したりするマルチパートの送信には対応していません。
必要な場合は、手を加えてください。
PHPにデータを渡した場合を想定しています。
例として、example.php にデータ送信します。
送信先URLの指定は、 action または data-action の属性のどちらかに記述してください。
HTML＆jQuery で example.php にPOST送信
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title></title>
<script type="text/javascript">
<!--
jQuery(function(){
$('section').on('submit', "form", function(){
var flag = false;
if(flag == false){
flag = true;
// form オブジェクト作成
var form = $('<form/>', {action:null, method:null});
// method 属性設定
if($(this).attr('method')){
form[0].method = $(this).attr('method');
}
// action 属性設定
if($(this).attr('data-action')){
form[0].action = $(this).attr('data-action');
} else if($(this).attr('action')){
form[0].action = $(this).attr('action');
}
// データ 設定
$.each($(this).serializeArray(), function(key, val){
form.append($('<input/>', {type:'hidden', "name":val.name, "value":val.value}));
});
// formをbody要素に挿入
form.appendTo(document.body);
// 送信
form.submit();
}
return false;
});
});
//-->
</script>
</head>
<body>
<section>
<form method="post" action="" data-action="example.php">
<input type="text" name="data[key-1]" value="VALUE-1" /><br />
<input type="hidden" name="data[key-2]" value="VALUE-2" /><br />
<button type="submit">送信</button>
</form>
</section>
</body>
</html>
送信ボタンを押した結果
送信後、example.phpが受け取ったデータです。example.php が受け取ったPOSTデータ
Array
(
[data] => Array
(
[key-1] => VALUE-1
[key-2] => VALUE-2
)
)
送信先URLの指定例
補足として、送信先を指定する箇所です。action か data-action のどちらかに設定してください。
例：送信先のURLのの指定方法
// data-action属性に指定した場合 (両方指定した場合は、data-actionが優先)
<form method="post" action="" data-action="example.php">
// action属性に指定した場合
<form method="post" action="example.php" data-action="">
以上、jQueryからformオブジェクトを生成してPOST送信する方法でした。
0 件のコメント:
コメントを投稿