使用jquery保存表单数据而不使用php

我想以JSON格式保存此数据而不使用PHP，当用户给出值并按发送时，其数据将添加到JSON中，以便我可以将此JSON用作数据库。使用jquery保存表单数据而不使用php

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

非常感谢你的帮助:)提前

来源

2017-02-14 Hari Om Srivastava

_“我要救JSON格式此数据，而无需使用PHP” _哪里是数据保存？ – guest271314

以json格式保存数据，我想创建新的json并将所有数据保存在一个json中 –

是的，“不使用PHP”是什么意思？数据保存在哪里？文件是否提供给用户下载？ – guest271314

您可以通过表单迭代和收集它在一个阵列，您可以在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>

来源

2017-02-14 19:09:26 Boldizsar

你能给我完整的代码吗？ –

@HariOmSrivastava这实际上是完整的代码。你会缺少什么？ – Artemis

我更新了我的答案 – Boldizsar

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

来源

2017-02-14 19:14:34 IrishGeek82

这是许多人可能的解决方案。这不利用JQuery，这将使过程更容易。我只发送生成的JSON对象到控制台;不过，您可以使用AJAX调用将对象发送到某个端点。 http://stackoverflow.com/questions/11338774/serialize-form-data-to-json – IrishGeek82

更新的解决方案包括一个基于JQuery的解决方案，包括一个简单的后期示例。 – IrishGeek82

使用jquery保存表单数据而不使用php

回答

相关问题