form表单一键提交数据及验证(不会刷新页面)【原创】

2017-11-15 10:49:01来源:http://blog.it985.com/22554.html作者:IT985博客人点击

分享

最近写的项目,一整张页面全部都是输入框,如果走ajax–post提交,估计得写1个小时的获取值,现在使用form表单提交就好多了,验证一些必要项,使我们的工作会提高很多的效率,还不会感觉烦躁,下面附上代码:


<form class="serialize" enctype="multipart/form-data" target="rfFrame">//让表单提交到一个内嵌网页上
<input name="test" value="" >//name值使我们传的参数名称
<button class="pot-seach add-keep" name="login" onclick="return check(form)">保存</button>//提交之前走验证check()方法
<iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe>//设置这个内嵌网页是不可见的
</form>

下面是js表单序列化提交代码


$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
function check(form){
//和form表单的class名称一致
var param = $('.serialize').serializeObject();//json数组
if(form.test.value==''){
alert('请输入企业名称');form.test.focus();return false;
}
$.ajax({
url:'',
data:param,
async:false,
type:'post',
dataType:'json',
beforeSend: function () {
},
complete: function () {
},
success: function (data) {
if (data.errorCode == 0) {
location.href='';
} else {
alert(data.message.message);
return false;
}
}
})
}

以上的表单提交会给我们省去很多的工作量


其中还有如果我们有上传图片的,我们可以把后台返回的字段单独存到一个(使用js或者jquery赋值进去)


<input type=”hidden” name=”photo”>


类似的后天想要什么格式的我没都可以通过用以上方法赋值进去,这样是不是会很节省工作量


转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22554.html



微信打赏


支付宝打赏


感谢您对作者Niki的打赏,我们会更加努力!如果您想成为作者,请点我


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台