当前位置 博文首页 > 向往的那片海洋：Ajax 异步提交表单
所谓异步提交表单，就是不再使用表单的提交按钮实现表单的提交功能，而是通过 Ajax 异步交互方式实现表单。具体实现步骤如下：
<body>
<form action="#">
<input type="text" id="name">
<input type="submit">
</form>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
$('form').bind('submit',function(event){
// 阻止默认行为
event.preventDefault();
// 1. 获取表单组件的数据内容
var name = $('#name').val();
// 2. 构建发送给服务器端的数据格式
var data = 'name=' + name;
// 3. 通过异步交互提交表单
$.post('data/server4.json',data,function(response){
console.log(response);
});
});
</script>
serialize() 方法：将表单组件对应的数据值序列化为指定格式的字符串内容。$('from').serialize
serializeArray() 方法：将表单组件对应的数据值序列化为 JSON 格式的数据内容$('select,:radio').serializeArray()
<body>
<form action="#">
<input type="text" name="username" id="name">
<input type="text" name="password" id="pwd">
<input type="submit">
</form>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
$('form').bind('submit', function (event) {
event.preventDefault(); // 阻止默认行为
// 表单序列化 - 根据表单默认同步提交获取数据的方式
// var data = $('form').serialize();
var data = $('form').serializeArray();
console.log(data);
// 3. 通过异步交互提交表单
$.post('data/server4.json', data, function (response) {
console.log(response);
});
});
</script>
