Jquery把获取到的input值转换成json


Posted in jQuery onMay 15, 2017

话不多说,请看代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title> jquery把获取到的input值转换成json</title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <link rel="stylesheet" type="text/css" href="" />
 <style type="text/css">
 .box{width:500px;height:500px;border:1px solid #e5e5e5;}
 </style>
 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 </head>
 <body>
 <div class="box">
    姓名:<input type="text" value="" name="username" /> <br/><br/>
    年龄:<input type="text" value="" name="age" /> <br/><br/>
    生日:<input type="text" value="" name="birth" /> <br/><br/>
    城市:<input type="text" value="" name="city" /> <br/><br/>
    省份:<input type="text" value="" name="provicen" /> <br/><br/>
    性别:<input type="text" value="" name="sex" /> <br/><br/>
    <input type="button" value="提交" class="comment">
 </div>
 <script type="text/javascript">
  $(document).ready(function(){
    $(".comment").click(function(){
      parArr = {};
       var username = $('input[name=username]').val().replace(/(^\s*)|(\s*$)/g, "");
       parArr.username = username;
       var age = $('input[name=age]').val().replace(/(^\s*)|(\s*$)/g, "");
       parArr.age = age;
       var birth = $('input[name=birth]').val().replace(/(^\s*)|(\s*$)/g, "");
       parArr.birth = birth;
       var city = $('input[name=city]').val().replace(/(^\s*)|(\s*$)/g, "");
       parArr.city = city;
       var provicen = $('input[name=provicen]').val().replace(/(^\s*)|(\s*$)/g, "");
       parArr.provicen = provicen;
       var sex = $('input[name=sex]').val().replace(/(^\s*)|(\s*$)/g, "");
       parArr.sex = sex;
       var params = JSON.stringify(parArr);
       alert(params);
    });
  });
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

jQuery 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery实现带进度条的轮播图
Sep 13 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 #jQuery
jQuery返回定位插件详解
May 15 #jQuery
jQuery操作css样式
May 15 #jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 #jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 #jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 #jQuery
jQuery遍历节点方法汇总(推荐)
May 13 #jQuery
You might like
PHP常用代码
2006/11/23 PHP
深入理解PHP中的count函数
2016/05/31 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
JQuery 入门实例1
2009/06/25 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
python中几种自动微分库解析
2019/08/29 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
韩国11街:11STREET
2018/03/27 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
经济管理毕业生求职信
2014/03/15 职场文书
协议书范本
2014/04/23 职场文书
党员个人整改措施
2014/10/24 职场文书