首页 > 其他分享 >jquery.serializejson.min.js的妙用

jquery.serializejson.min.js的妙用

时间:2023-06-06 15:34:45浏览次数:38  
标签:jquery 插件 表单 serializejson js serializeJSON

jquery.serializejson.min.js的妙用
 关于这个jquery.serializejson.min.js插件来看,他是转json的一个非常简单好用的插件。

  前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交。

而在处理复杂的表单时,需要一个一个区手动判断处理字段值,显得非常麻烦。接下来介绍的插件将解决这个问题。

关于serializeJSON
  使用jquery.serializeJSON,可以在基于jQuery或者Zepto的页面中,调用 .serializeJSON() 方法来序列化form表单的数据成JS对象。

下载

下载该插件的地址是:http://www.bootcdn.cn/jquery.serializeJSON/

使用

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.serializejson.js"></script>
参考

可以参考博文:https://www.cnblogs.com/linzenews/p/7065050.html

事例

拿一个我自己的小例子,对于页面表单多,而且元素多,后台要求使用ajax传递数据时,我使用了该插件,连校验都顺畅了很多。

 我这表格是自动添加的。这个时候每个元素的name名称是一样的,所以我需要让后台知道对应的是哪个元素的值,这个时候我想到了这个插件

使用

var serializeObj=$('#s-form-a').serializeJSON();
var serializeStr=JSON.stringify(serializeObj);
console.log(serializeStr);
结果是另我满意的。

校验该插件,我使用了jquery.validate.js. 针对name名称一致的,使用了

'assessVoList[][losshow]':{
    required:true,
},
'assessVoList[][losshow]':{
    required:“不能为空”,
},
最后达到了满意的效果。关于jquery.validate.js的了解,我的博客里也有相应的介绍和总结,欢迎坐沙发!

 

标签:jquery,插件,表单,serializejson,js,serializeJSON
From: https://www.cnblogs.com/webSnow/p/17460683.html

相关文章

  • tscconfig.json--ts配置文件
    {//include用来指定那些需要被编译的ts文件//exclude用来指定那些不需要被编译的ts目录//默认不被编译的:["node_modules","bower_components","jspm_packages"]"include":[/***表示:任意目录*表示:任意文件*/"./src/**/*"],......
  • 如何在Python中使用JSON模块
    JSON(JavaScriptObjectNotation)是一种流行的轻量级数据交换标准。它表示由键值对组成的数据结构,非常简单易懂。JSON已成为在线服务之间数据交换的行业标准。它广泛用于现代编程语言,包括Python。JSON数据经常表示为嵌套字典、列表和标量值,例如文本、数字、布尔值和空值。之所......
  • 26) minify-maven-plugin 合并压缩 js css文件
     http://samaxes.github.io/minify-maven-plugin/minify-mojo.html <build><plugins><plugin><groupId>com.samaxes.maven</groupId><artifactId>minify-maven-plugin</artifactId><version&g......
  • 27) yuicompressor-maven-plugin 合并压缩 js css文件
    http://davidb.github.io/yuicompressor-maven-plugin/compress-mojo.html<plugin><groupId>net.alchim31.maven</groupId><artifactId>yuicompressor-maven-plugin</artifactId><version>1.5.1</......
  • js判断是否处于移动端
    应用场景在uniapp中通过webview嵌入了PC端界面,某些界面方法需要根据处于PC还是uniapp进行不同的处理,此处简单通过界面宽度去判断。代码示例const{body}=documentconstWIDTH=992isMobile(){constrect=body.getBoundingClientRect()returnrect.width-......
  • 认识soui4js(第1篇)
    源代码:https://github.com/soui4js/soui4jssoui4js是soui4+quickjs的结合体。soui4是一套c++directui客户端开发框架,soui4js则将soui4的开发语言从C++迁移到了js。可能有人要问:为什么要使用js来开发?使用js开发最大的优势就是开发快速,代码写下来就可以运行,测试,同时更方便热更......
  • jQuery
    jQueryjQuery常用插件网站jQuery插件库:http://www.jq22.com/jQuery之家http://www.htmleaf.com/jQuery事件/on()绑定多个事件jQuery解绑事件off()jQuery绑定只执行一次事件one()jQuery自动触发事件trigger()和定时器一起使用可以达到自动触发指定事件的效果......
  • ExtJs4 grid合并行
    代码实现/***Kunoy*合并单元格*@param{}grid要合并单元格的grid对象*@param{}cols要合并哪几列[1,2,4]*/varmergeCells=function(grid,cols){vararrayTr=document.getElementById(grid.getId()+"-body").firstChild.firstChild.firstChi......
  • 在centos7升级nodejs存在的无法切换版本的问题解决
    1.安装n管理工具npminstall-gn安装最新版本nlatest安装指定版本 n8.11.3 2.切换nodejs版本n选择已安装的版本 ο node/8.11.3  node/10.4.1查看当前版本node-v,下面表示已切换成功v8.13.3但问题来了,切换后,查看版本还是原来的v6.13.3,看下面 使用n切换nodejs......
  • 浏览器环境下JS构建xml文本
    虽然许多地方json替代了xml,但是仍然有部分领域使用xml来描述数据。可以使用浏览器环境下js中dom的API,来快速构建xml文本,避免手动拼接字符串。//创建XML文档对象letxmlDoc=document.implementation.createDocument("","",null);//创建根节点letroot=......