<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>FormData收集表单信息</title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script> </head> <body> <form name="the" action="serve/serve.php" method='post'> <table> <tr> <td>用户名<input type="text" name="username"></td> </tr> <tr> <td>密码 <input type="password" name="pwd"></td> </tr> <tr> <td><input type="submit" value="登陆"></td> </tr> </table> </form> </body> <script type="text/javascript"> $(document).ready(function(){ $("form").submit( function () { //使用 FormData 对象收集表单数据 var FormData = $("form[name=the]").serialize(); //批量获取了数据 var FormData = $("form[name=the]").serializeArray(); //并且转换为Json格式数据 console.log(FormData); /* * 选择传输的 FormData 数据 * 进行 AJAX 数据验证 */ alert(FormData) return false; //设置为 false 这样表单提交就不会页面跳转 }); }) </script> </html>