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框实例
Aug 22 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jQuery实现本地存储
Dec 22 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
介绍几个array库的新函数 php
2006/12/29 PHP
Zend Guard一些常见问题解答
2008/09/11 PHP
php str_pad 函数用法简介
2009/07/11 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP答题类应用接口实例
2015/02/09 PHP
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
查找Oracle高消耗语句的方法
2014/03/22 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
javascript中this关键字详解
2016/12/12 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
详解python中的Turtle函数库
2018/11/19 Python
PyTorch预训练的实现
2019/09/18 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
英国知名小木屋定制网站:Tiger Sheds
2020/03/06 全球购物
酒店仓管员岗位职责
2014/04/28 职场文书
坎儿井导游词
2015/02/09 职场文书
校本研修个人总结
2015/02/28 职场文书
无房证明样本
2015/06/17 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js