![[Ajax] jQuery中的Ajax -- 04-异步提交表单](https://2000zi.500zi.com/uploadfile/img/15/895/c7e32f6e4a623a3d33251f198a21c80a.jpg)
异步提交表单
异步提交表单的步骤
获取表单及所有表单组件对应的数据值。将所有表单组件对应的数据值拼成特定格式的字符串或是JSON格式数据。通过Ajax异步交互方式提交表单。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><form action="#"><input type="text" id="name"><input type="submit"></form><script src="js/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/server5.json',data,function(response){console.log(response);});});</script></body></html>
表单序列化
serialize()方法:将表单组件对应的数据值序列化为指定格式的字符串内容。
serializeArray()方法:将表单组件对应的数据值序列化为JSON格式的数据内容。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><form action="#"><input type="text" name="username" id="name"><input type="text" name="password" id="pwd"><input type="submit"></form><script src="js/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/server5.json',data,function(response){console.log(response);});});</script></body></html>
