用jQuery实现表单数据异步提交
传统的form表单如下所示：<form name="input" action="recv.cgi" method="post">Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form> 上面代码可以放到下面网页上，查看效果。
http://www.w3school.com.cn/tiy/t.asp?f=html_basic
当用户点击"submit"后，会引起页面的重定向，有些网页比较大，会刷新很长时间，而用户原本的意思只是提交数据，并不需要刷新页面。这会极大降低用户体验。
jQuery这个东西很不错，它可以实现表单数据的异步提交，而不需要刷新网页。下面一段代码作为一个例子。
<html><head><style type="text/css"><!--form{margin:0px; padding:0px;font-family:Arial,Helvetica, sans-serif;font-size;12px;}input, select{font-family:Arial, Helvetica, sans-serif;font-size;12px;}table{border:1px solid #00328f;border-collapse;collapse;background-color:#d4e3ff;}table td{border:1px solid #00328f;padding:4px 6px 4px 6px;}input, input, input, input{type=button}, input, textarea, select{border:1px solid #00328f;}--></style></head><body><form id="myForm" name="myForm"><table cellspacing="0" id="formTable"><input type="hidden" name="Hidden" value="secret"><tr><td>用户</td><td><input name="Name" type="text"></td></tr><tr><td>密码</td><td><input name="Password" type="password"></td></tr><tr><td>性别</td><td><label><input type="radio" name="Radio" value="male">男</label><label><input type="radio" name="Radio" value="female">女</label></tr><tr><td>多选</td><td><select name="Multiple" multiple="multiple"><option>One</option><option>Two</option><option>Three</option></select></td></tr><tr><td>单选</td><td><select name="Single"><option>One</option><option>Two</option><option>Three</option></select></td></tr><tr><td>爱好</td><td><label><input type="checkbox" name="Check" value="roaming">逛街</label><label><input type="checkbox" name="Check" value="balls">打球</label><label><input type="checkbox" name="Check" value="balls">看电视</label><tr><td>收入</td><td><label><input type="checkbox" name="Check2" value="below5K">5000以下(不含)</label><label><input type="checkbox" name="Check2" value="above5K">大于5000</label></td></tr><tr><td>留言</td><td><textarea name="Text" rows="2" cols="20"></textarea></td></tr><tr><td colspan="2" align="center"><input type="submit" name="sub" value="Submit"><input type="reset" name="resetButton" value="Reset"><input type="button" name="btn" value="FieldValue" ></td></tr></table></form></body></html>
现在的表单只是一个普通的表单，关键在后面，请看：
我要在<head></head>之间加入一段代码
<script language="javascript" src="jquery.min.js"></script><script language="javascript" src="jquery.form.js"></script><script language="javascript">function checkFieldValue(){ var aFieldValue = $("#myForm *").fieldValue(); //获取整个表单有用元素的值 alert(aFieldValue.join());}</script>
这样再点击FieldValue按钮时，就变成了异步提交，在checkFieldValue()函数里，用alert()让页面弹出一个窗口，上面带有提交的数据。这就证明了已经成功异步提交数据。
但是给服务器传递数据时，要注意数据提交的格式，post方式提交的数据应该是类似于”name=xxx&value=xxx&password=xxx“的字符串，上面异步提交的数据不是这种，那么我们就可以换一个函数
function checkFormSerialize(){ var aQuery = $("#myForm").formSerialize(); //将整个表单的有用值格式化 alert(sQuery); //后面可以接Ajax语句，用于给服务器传输数据 //$.post(url,sQuery);} 将上面的checkFieldValue()换成checkFormSerialize()就ok，此后提交的数据就是格式化好的数据，”name=xxx&value=xxx&password=xxx“，就是这种的。如果提交的数据是给服务器，那么就用$.post(url,sQuery);url为要提交给服务器的指定文件，比如url为http://192.168.6.20/cgi-bin/xxx.cgi.
页:
[1]