Question

很难找到解决方法来获取html表单数据并使用javascript将其转换为json文件

看过很多地方，但是找不到任何东西。

<!DOCTYPE html>
<html>
<body>

 <p>Enter names in the fields, then click "Submit" to submit the form: 
 </p>

 <form id="frm1" action="/">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br><br>
 <input type="button" onclick="myFunction()" value="Submit">
 </form>

 <script>
 function myFunction() {
 document.getElementById("frm1").submit();
 }
 </script>

 </body>
 </html>

只需要知道如何将HTML表单数据不使用php而是使用javascript传输到json中即可。

Answer 1

function formSerialize(formElement) {
   const values = {};
   const inputs = formElement.elements;

   for (let i = 0; i < inputs.length; i++) {
       values[inputs[i].name] = inputs[i].value;
   }
   return values;
}

在您的脚本中添加此功能并调用这样的功能

formSerialize(document.getElementById("frm1"))

同时将为您提供表单数据的json格式

{fname: "wer", lname: "wer", "": "Submit"}

希望这会对您有所帮助。

Answer 2

我不确定您希望最终产品的外观如何，但这是最接近的解决方案，无需修改太多代码。

首先：将输入内容更改为具有“ id”而不是名称（或两者都指向您需要ID）

First name: <input type="text" id="fname"><br>
Last name: <input type="text" id="lname"><br><br>

第二：让您的脚本如下所示：

 <script>
 function myFunction() {
    let output = {
        fName: document.getElementById("fname").value, 
        lName: document.getElementById("lname").value
    };
    console.log(output);
 }
 </script>

希望有帮助。

HTML表单数据转换成JSON文件

2 个答案: