jQuery中验证表单提交方式及序列化表单内容的实现_jquery

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年8月28日16:13:29 评论 32 views

之前项目中使用的表单提交方式

使用form()方法可以将提交事件脱离submit按钮,绑定到任何事件中

复制代码 代码如下:

function addSubmit(){

$('#addForm').form('submit', {

url : _basePath + '/@Controller/@RequestMapping',

onSubmit : function() {

if(boolean){//放置能否提交的判断条件

$.messager.show({

title:'提示',msg:'不符合保存条件',

showType:'fade',style:{right:'',bottom:''}

});

return false;//阻止表单提交

}

return $('#addForm').form('validate');//判断required项是否全部有值

},

success : function(data) {

var obj = jQuery.parseJSON(data);//将返回的JSON转化为所需对象(ResponseData)

if (!obj.success) {//判断返回的ResponseData对象中标示状态的属性值

$.messager.show({

title:'提示',msg:'保存失败',

showType:'fade',style:{right:'',bottom:''}

});

} else {

$.messager.show({

title:'提示',msg:'保存成功',

showType:'fade',style:{right:'',bottom:''}

});

$("#addWin").window("close");//关闭提交pwkk

query();//刷新结果集

}

}

});

}

今天在《锋利的jQuery》中又读到这样一种提交方式,使用ajax封装了表单内容用post提交

复制代码 代码如下:

$("#btn").click(function() {

$.get("get.php", {username:$("#username").val(), password:$("#password").val()}, function(data, textStatus) {//将表单中的数据逐条取出后封装上传

$("#target").html(data);//将返回值填充至页面中

});

});

而后有一个简化版,使用serialize()方法序列化

复制代码 代码如下:

$("#btn").click(function() {

$.get("get.php", $("#form").serialize(), function(data, textStatus) {//将表单中的数据逐条取出后封装上传

$("#target").html(data);//将返回值填充至页面中

});

});

serialize()方法可以自动编码,而且除表单之外的如checkbox等对象也可以使用其进行转换

同时还有serializeArray()方法可以将元素序列化后返回数组形式的JSON对象,而非JSON字符串

即无需使用jQuery.parseJSON()方法进行转换

返回值可直接使用类似$.each()等方法进行操作使用

继续阅读
企鹅博客
  • 本文由 发表于 2020年8月28日16:13:29
  • 转载请务必保留本文链接:https://www.qieseo.com/419787.html
使用js提交表单form js教程

使用js提交表单form

首先我们先用html创建一个表单 Name: Email: <--一般情况下,这里是使用submit--> 在这个表单中,我们没用使用submit,我们准备使用js来提交这个表单。首先介绍...
js下载以及修改文件名的实例教程 js教程

js下载以及修改文件名的实例教程

这篇文章主要为大家详细介绍了js下载文件并修改文件名的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 用js下载文件,使用<a>标签,添加download属性即可。 var a =...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: