Question

我希望在不使用PHP的情况下以JSON格式保存此数据，当用户提供值并按下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 个答案: