jQuery实现input表单值转换为JSON对象的方法
作者:桌面漫游时间:2026-10-22 04:00:19浏览:233
本文介绍了如何使用jQuery获取input输入框的值,并通过JSON.stringify方法将其转换为JSON字符串。示例代码展示了从HTML表单获取数据、清理空格到最终输出JSON格式字符串的完整过程,适用于前端数据序列化场景。
jQuery转换input值为JSON的实现代码
具体实现代码如下:
<!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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持本站!
作者最新文章
Mock.js 拦截失效或数据格式错误的常见原因及排查
2026-11-05 10:11:59
Java和JavaScript名字像但没关系:辨析Java、JavaWeb与JS
2026-11-04 09:30:54
CodePen、JSFiddle与RunJS对比:哪款JS在线运行工具更适合你?
2026-11-03 16:46:57
JS 统计图渲染空白或报错怎么排查?常见问题解决指南
2026-11-03 09:49:40
flv.js 常见报错 MediaError 与解码失败排查指南
2026-11-02 10:29:29
相关标签:
