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插件制作 自增长输入框实现代码
Aug 17 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery实现推拉门效果
Oct 19 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
10条php编程小技巧
2015/07/07 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
移动端js图片查看器
2016/11/17 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
QQ空间主人寄语大全
2014/04/12 职场文书
银行求职信怎么写
2014/05/26 职场文书
安全生产先进个人总结
2015/02/15 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS