</head>
<body>
<div class="container">
<form >
<label for="ProductID">ProductID</label>
<input type="text" id="id" name="firstname" placeholder="ProductID">
<label for="productTitle">Product title</label>
<input type="text" id="title" name="lastname" placeholder="productTitle">
<br><input type="submit" value="Submit" id="submitBtn">
</form>
<script>
var md = document.getElementById("submitBtn");
var data = JSON.stringify(md) // it convert into string
var myArr = JSON.parse(data);
console.log(typeof myArr);// it is returning object
</script>
</div>
</body>
我想在用户单击提交按钮时将数据转换为 j-son 格式,以便我可以将数据发布到我使用的其余 api JSON.parse 转换为 json 但它不起作用
最佳答案
我认为您想通过单击提交按钮来序列化表单。
Form转Json:循环所有输入元素转json。
Json 到 Form:循环 json 对象并设置输入的值。
function toJSONString( form ) {
var obj = {};
var elements = form.querySelectorAll( "input, select, textarea" );
for( var i = 0; i < elements.length; ++i ) {
var element = elements[i];
var name = element.name;
var value = element.value;
if( name ) {
obj[ name ] = value;
}
}
return JSON.stringify( obj );
}
function toFormValue( string ) {
var obj = JSON.parse(string);
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var content = obj[key];
var input = document.getElementsByName(key)[0];
input.value = content;
}
}
}
<html>
<body>
<div class="container">
<form id="form">
<label for="ProductID">ProductID</label>
<input type="text" id="id" name="firstname" placeholder="ProductID">
<label for="productTitle">Product title</label>
<input type="text" id="title" name="lastname" placeholder="productTitle">
<br><input type="submit" value="Submit" id="submitBtn">
</form>
<button onclick="toFormValue(json)">Set</button>
<script>
var json = {};
var form = document.getElementById( "form" );
form.addEventListener( "submit", function( e ) {
e.preventDefault();
var r = toJSONString( this );
json = r;
console.log(json);
}, false);
</script>
</div>
</body>
</html>
关于javascript - 当用户单击提交按钮时,我想将对象类型转换为 j-son 以在 rest api 中发布数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50675867/