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日历价格、库存等设置插件
Jul 05 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 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文件上传实例详解!!!
2007/01/02 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
JavaScript类库D
2010/10/24 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python数据结构之二叉树的建立实例
2014/04/29 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
建筑工程技术专业求职信
2014/07/16 职场文书
初中学习计划书范文
2014/09/15 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
公证书
2019/04/17 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL