使用沒有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