用jQuery实现表单数据异步提交

东边日出西边雨

浏览: 262702 次
性别:
来自: 北京

最近访客更多访客>>

guanbeilang

examine5191

tricoffee-100

碧云天_xll

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

网页

jQuery JavaScript CGI Ajax ASP

传统的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[type=text], input[type=password], input[type=submit], input{type=button}, input[type=reset], 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" onclick="checkFieldValue()"></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.

分享到：