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

最新推荐文章于 2022-08-13 17:05:45 发布

m4vsak123

最新推荐文章于 2022-08-13 17:05:45 发布

阅读量168

点赞数

分类专栏：网页文章标签： jQuery JavaScript CGI Ajax ASP ViewUI

本文链接：https://blog.csdn.net/m4vsak123/article/details/83696093

版权

网页专栏收录该内容

2 篇文章 0 订阅

订阅专栏

传统的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" οnclick="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.

m4vsak123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用jQuery实现表单数据异步提交

传统的form表单如下所示：&lt;form name="input" action="recv.cgi" method="post"&gt;Username: &lt;input type="text" name="user" /&gt;&lt;input type="submit" value="Submit&q
复制链接

扫一扫

专栏目录