json数组生成器-jquery

来源：互联网发布：淘宝客服如何设置分流编辑：程序博客网时间：2024/06/05 22:58

<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">


<script src="jquery-2.2.3.min.js"></script>
<script type="text/javascript">
function addInput(obj) {
var html = '<br><div class="inputDiv">'
+ '<input type="text" name="key" /> <input type="text" name="value" />'
+'   <input type="button" onclick="removeInput(this)" value="-" />'
+'   <input type="button" onclick="addInput(this)" value="+" />'
+ '</div>';
$(obj).parent().after(html);
}
function createJson() {
var jsonStr = "{";
var keyLength = $("input[name='key']").length;
for (var i = 0; i < keyLength; i++) {
if (i == 0) {
jsonStr += "\"" + $("input[name='key']").eq(i).val() + "\":\""
+ $("input[name='value']").eq(i).val() + "\"";
} else {
jsonStr += ",\"" + $("input[name='key']").eq(i).val() + "\":\""
+ $("input[name='value']").eq(i).val() + "\"";
}
}
jsonStr += "}";
//$(".jsonData").last().val(JSON.stringify(JSON.parse(jsonStr), null, "\t"));
var html = '<br><div><textarea rows="10" cols="50" class="jsonData">'+JSON.stringify(JSON.parse(jsonStr), null, "\t")+'</textarea>'
+'   <input type="button" onclick="removeTextarea(this)" value="-" /></div>';
$(".inputDiv").last().after(html);
}
function createJsonArray() {
var jsonArrayStr = '[';
$(".jsonData").each(function(index) {
if(index == 0) {
jsonArrayStr += $(this).val();
} else {
jsonArrayStr += ',' + $(this).val();
}
});
jsonArrayStr += ']';
$("#jsonArrayData").val(jsonArrayStr);
}
function removeInput(obj) {
$(obj).parent().remove();
}
function removeTextarea(obj) {
$(obj).prev().remove();
$(obj).remove();
}
</script>

</head>

<body>
<h2>Hello World!</h2>
<form action="">
<div class="inputDiv">
<input type="text" name="key" /> <input type="text" name="value" />   <input type="button" onclick="removeInput(this)" value="-" />   <input type="button" onclick="addInput(this)" value="+" />
</div>

<br>
<div>
<input type="button" onclick="createJson()" value="生成JSON" />
</div>
<br>
<br>
<div>
<textarea rows="20" cols="80" id="jsonArrayData"></textarea>
</div>
<div>
<input type="button" onclick="createJsonArray()" value="生成JSON数组" />
</div>
</form>
</body>
</html>

阅读全文

0 0