jquery插件异步提交表单 jquery.form.js

最新推荐文章于 2021-11-01 16:22:40 发布

jattxgt

最新推荐文章于 2021-11-01 16:22:40 发布

阅读量309

点赞数

分类专栏： js 文章标签： jquery.form.js jquery插件异步表单提交 ajaxSubmit ajaxForm

本文链接：https://blog.csdn.net/qq_38555490/article/details/90055009

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

需求:

我们的用户管理，我们需要对他进行新增用户，和编辑用户两个功能。

分析：

新增和编辑都是表单提交数据，我们需要在对用户新增，或者编辑后返回一个状态给用户，告诉是否新增或者修改成功。

解决方案：

使用异步，使用jquery.form.js插件来解决。

第一步：引入jQuery与jQuery.Form.js

<script src="js/jquery.min.js"></script>
<script src="js/jquery.form.js"></script>

HTML代码示例：

<form id="form1" method="post" action="your url">
			账号:<input name="username" id="username" ><br>
			密码:<input name="password" id="password"><br>
			<input type="submit" value="提交">
</form>

js代码

var options = {
		type : 'post',
		dataType : 'json',
		success : function(data) {
			if (data.status) {
				alert(data.msg);
				frameElement.api.opener.reloadTable();//刷新
				frameElement.api.close();//关闭窗口
			} else {
				alert(data.msg);
			}
		},
		error : function() {
			frameElement.api.close();
			var win = frameElement.api.opener;
			alert("出现错误!");
			win.reloadTable();
		}
	};
	$('#form1').ajaxSubmit(options);

详细代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.form.js"></script>
	</head>
	<body>
		<form id="form1" method="post" action="your url">
			账号:<input name="username" id="username" ><br>
			密码:<input name="password" id="password"><br>
			<input type="submit" value="提交">
		</form>
	</body>
	<script>
		var options = {
		type : 'post',
		dataType : 'json',
		success : function(data) {
			if (data.status) {
				alert(data.msg);
				frameElement.api.opener.reloadTable();//刷新
				frameElement.api.close();//关闭窗口
			} else {
				alert(data.msg);
			}
		},
		error : function() {
			frameElement.api.close();
			var win = frameElement.api.opener;
			alert("出现错误!");
			win.reloadTable();
		}
	};
	$('#form1').ajaxSubmit(options);
		
	</script>
</html>

jquery.form.js options选项

选项	说明
url	表单提交数据的地址
type	form提交的方式(method:post/get)
target	服务器返回的响应数据显示在元素(Id)号
error	提交失败执行的回调函数
success	提交成功后执行的回调函数
data	除了表单数据外，还需要额外提交到服务器的数据
dataType	期望服务器返回数据类型
timeout	设置请求时间，超过该时间后，自动退出请求，单位(毫秒)