分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

jQuery 之 serialize() serializeArray()

发布时间:2023-09-06 02:16责任编辑:傅花花关键词:jQuery

  jQeury提供了2个帮助获取表单元素数据的方法。分别是serialize()  和 serializeArray()。两者作用完全相同,只不过是返回值不同,前者是返回一个字符串,后者返回一个Json对象数组。直接看例子,一目了然。

  1.表单结构代码

<form id="form1"> ???<input type="text" name="uName" ?value="老王"> ???<input type="password" name="pwd" ?value="123456"> ???<input type="text" name="phone" value="13555558888"> ???<input type="submit" id="btn" value="提交数据"></form>

  2.js代码

 //引入必要的jquery依赖js 上面已经说过jquery中包含完整的ajax<script src="/static/jquery1.12.min.js"></script><script> ???$(document).ready(function () { ???????//点击提交按钮 打印两种序列化方式出来的字符串 ???????$("#btn").click(function () { ???????????//打印字符串序列化表单 ???????????console.log($("#form1").serialize()); ???????????//打印json数据格式序列化表单 ???????????console.log($("#form1").serializeArray()) ???????}) </script>

  3.输出结果

  jQuery会自动搜索到form1中的所有表单元素,然后获取到对应的value值。这里需要注意的是,所有的表单元素在获取时,是以name属性为准的,不是以id属性为准。

  serialize()的输出结果是:uName=老王&pwd=123456&phone=13555558888。

  serializeArray()的输出结果是:[{"uName" :  "老王"}, {"pwd" : "123"}, {"phone" : "13555558888"}] 

  

jQuery 之 serialize() serializeArray()

原文地址:https://www.cnblogs.com/ldq678/p/9736157.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved