使用没有PHP的jquery在JSON中保存表单数据

Question

我想将此数据保存为JSON格式而不使用PHP，当用户提供值并按send时，其数据添加到JSON中，这样我就可以将此JSON用作数据库。

<!DOCTYPE html>
<html>
<body>

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form> 



</body>
</html>

非常感谢您的帮助:)

Answer 1

您可以遍历表单并将其值收集到数组中，并可以以JSON格式进行编码。

<!DOCTYPE html>
<html>
<body>

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit" onclick="logJsonInputs()">
</form>   


<script type="text/javascript">
function logJsonInputs() {
    var nameFormElements = document.getElementById("name_form").elements;
    var inputs = [];
    for(var i = 0; i < nameFormElements.length; i++) {
        var element = nameFormElements[i];
        inputs[element.name] = element.value;
    }

    var jsonInputs = JSON.stringify(inputs);
    console.log(jsonInputs);
}
</script>

</body>
</html>

Answer 2

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript">
        function stringifyForm(formObject)
        {
            var jsonObject    = {};
            var inputElements = formObject.getElementsByTagName("input"); 
                inputElements = Array.prototype.slice.apply(inputElements);        //Because I want to use forEach and getElementsByTagName returns an object.
                inputElements.forEach(function(e,i,a)
                                      {
                                        if (e.type != "submit")
                                        {
                                            jsonObject[e.name] = e.value;
                                        }
                                      }
                                     );


            $.post("https://www.apiaas.com/consume.php",
                   {
                    "data":jsonObject
                   },
                   function(data)
                   {
                     console.log(data);
                   }
                   );
        }

        function jquerySolution(formObject)
        {
            var jsonObject = JSON.stringify( $(formObject).serializeArray() );        

            $.post("https://www.apiaas.com/consume.php",
                   {
                    "data":jsonObject
                   },
                   function(data)
                   {
                     console.log(data);
                   }
                   );            
        }
    </script>
</head>
<body>

<form onsubmit="jquerySolution(this);return false;">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <button type="submit" value="Submit">Submit</button>
</form> 


</body>
</html>

使用没有PHP的jquery在JSON中保存表单数据

问题描述

2 个解决方案

解决方案1
2 2017-02-14 19:09:26

解决方案2
0 2017-02-14 19:14:34

使用没有PHP的jquery在JSON中保存表单数据

问题描述

2 个解决方案

解决方案1 2 2017-02-14 19:09:26

解决方案2 0 2017-02-14 19:14:34

解决方案1
2 2017-02-14 19:09:26

解决方案2
0 2017-02-14 19:14:34