经常用到jQuery的$.post
方法提交数据,觉得非常好用,特别是提高用户体验的场景。
提交之前可以验证数据、修改数据,提交成功或者失败能够及时反馈到用户界面。
有如下一个表单,
<form action="save.php" method="post">
<input type="text" name="username[]" value="Jason" />
<input type="text" name="username[]" value="Tom" />
<input type="text" name="username[]" value="Goe" />
<br />
<label><input type="checkbox" name="book[]" value="Learn" />Lear</label>
<label><input type="checkbox" name="book[]" checked="checked" value="PHP" />PHP</label>
<label><input type="checkbox" name="book[]" value="Program" />Program</label>
<br />
<label><input type="radio" name="sex[]" checked="checked" value="Female" />Female</label>
<label><input type="radio" name="sex[]" value="Male" />Male</label>
<label><input type="radio" name="sex[]" value="Unknown" />Unknown</label>
<br />
<select name="order">
<option value="first">first</option>
<option value="second">second</option>
<option value="third">third</option>
</select>
<p> </p>
<button type="submit">提交</button>
</form>
save.php代码:
<?php
echo json_encode($_POST);
1 用serialize()方法提交
如果不用修改和验证数据,用$.post()
提交最简单的方法是:
$('form').on('submit',function(e) {
e.preventDefault();
var data = $(this).serialize();
$.post('save.php', data, function(result) {
$('p').text(result);
});
});
返回数据:
{"username":["Jason","Tom","Goe"],"book":["PHP"],"sex":["Female"],"order":"first"}
2 用map()和get()提取数据后提交
2外一种是需要处理数据的情况,这种需要先把数据处理后再提交。
<script>
$('form').on('submit', function(e) {
e.preventDefault();
var username = $("input[name='username[]']").map(function () {
return $(this).val();
}).get();
var book = $("input[name='book[]']:checked").map(function() {
return $(this).val();
}).get();
var sex = $("input[name='sex[]']:checked").map(function() {
return $(this).val();
}).get();
var order = $("select[name='order']").val();
var data = {
'username': username,
'book': book,
'sex': sex,
'order': order
};
$.post('save.php', data, function(result) {
$('p').text(result);
});
});
</script>
这一段返回和上面一样的数据,但是明显比第一种方式多了很多代码。
所以,如无必要,优先推荐第一种方式。