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实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
使用jQuery实现购物车
Oct 29 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
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
JS获取当前地理位置的方法
2017/10/25 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
Python的设计模式编程入门指南
2015/04/02 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
校本教研工作方案
2014/01/14 职场文书
运动会开幕式解说词
2014/02/05 职场文书
竞聘演讲稿
2014/04/24 职场文书
服装设计师求职信
2014/06/04 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
2015年中秋节主持词
2015/07/30 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
Java常用函数式接口总结
2021/06/29 Java/Android