javascript - 当用户单击提交按钮时,我想将对象类型转换为 j-son 以在 rest api 中发布数据

标签 javascript html css

</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/

相关文章:

javascript - 在 React Multi Form 上提交后清除输入

javascript - 如何按图库的 ID 过滤 div 元素

html - 如何使背景div不计入可滚动区域

html - 如何减少文字动画中的特定文字大小?

javascript - 为 html 助手 Html.EditorFor 设置 id

javascript - 如何将 Scala 列表转换为 JavaScript 数组?

html - 文件布局和 Assets 链接?

javascript - 如何使用全页缓存进行 A/B 测试?

html - 没有 <a href> 的翻转文本

javascript - 如何在运行脚本之前检查元素是否已加载到页面上?