最新消息:文章中包含代码时,请遵守代码高亮规范!

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

JavaScript Niki 184浏览 0评论

最近写的项目,一整张页面全部都是输入框,如果走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


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

您必须 登录 才能发表评论!