使用 javascript 从数据库保存和检索用户输入？

Question

我正在开发一个小型临时网站，用于收集一些名字。

这个想法是人们填写他们的 class 号码和他们的名字，一旦他们按下一个按钮，这两个值就会被添加到页面上，并且可以被访问该站点的每个人查看。

我已经使用 javascript 对此做了一个概念：www.googledrive.com/host/0B_eZKT0Ni3-tOXF5OVVQeWZRRjQ

唯一的问题是这些项目并没有真正存储在网站上。据我所知，您只能使用数据库来完成此操作，但我没有将数据库链接到网页的经验。

有人可以帮我解决这个问题，或者有人知道我可以找到解决方案的来源吗？我的搜索结果一无所获。

对不起，如果我听起来像 "help vampire"。我只是向你们寻求解决方案，因为我在其他地方找不到它。

HTML:

<body>
<div id="wrapper">
    <div id="header">
        <h2 id="title">Italiëreis 2015: opdiening tijdens quiz</h2>
    </div>  
    <div id="content">
        <!-- eerste ploeg -->
        <div class="L">
            <p id="kop">Ploeg 1</p>
            <p class="klas"><input type="text" id="klas1" class="text" maxlength="2" placeholder="Klas"/></p>
            <p class="naam"><input type="text" id="naam1" class="text" placeholder="Naam"/></p>
            <input type="button" onclick="changeText1()" value="Schrijf in" class="button" />
            <br>
            <p>Reeds ingeschreven mensen:</p>
            <div class="overflow">
                <ol id="lijst1"></ol>
            </div>
        </div>
        <!-- tweede ploeg -->
        <div class="L">
            <p id="kop">Ploeg 2</p>
            <p class="klas"><input type="text" id="klas2" class="text" maxlength="2" placeholder="Klas"/></p>
            <p class="naam"><input type="text" id="naam2" class="text" placeholder="Naam"/></p>
            <input type="button" onclick="changeText2()" value="Schrijf in" class="button"/>
            <br>
            <p>Reeds ingeschreven mensen:</p>
            <div class="overflow">
                <ol id="lijst2"></ol>
            </div>
         </div>
        <!-- derde ploeg -->
        <div class="L">
            <p id="kop">Ploeg 3</p>
            <p class="klas"><input type="text" id="klas3" class="text" maxlength="2" placeholder="Klas"/></p>
            <p class="naam"><input type="text" id="naam3" class="text" placeholder="Naam"/></p>
            <input type="button" onclick="changeText3()" value="Schrijf in" class="button"/>
            <br>
            <p>Reeds ingeschreven mensen:</p>
            <div class="overflow">
                <ol id="lijst3"></ol>
            </div>
        </div>
        <!-- vierde ploeg -->
        <div class="L">
            <p id="kop">Ploeg 4</p>
            <p class="klas"><input type="text" id="klas4" class="text" maxlength="2" placeholder="Klas"/></p>
            <p class="naam"><input type="text" id="naam4" class="text" placeholder="Naam"/></p>
            <input type="button" onclick="changeText4()" value="Schrijf in" class="button"/>
            <br>
            <p>Reeds ingeschreven mensen:</p>
            <div class="overflow">
                <ol id="lijst4"></ol>
            </div>
        </div>
    </div>
    <div id="footer">
        <div id="credits">Code geschreven door Bert-Jan van Dronkelaar - 6E</div>
    </div>
</div>

CSS 无关紧要。

Javascript:

        //eerste ploeg
    function changeText1() {
        var klas1 = document.getElementById('klas1').value;
        var naam1 = document.getElementById('naam1').value;
        if (document.getElementById('klas1').value != "" && document.getElementById('naam1').value != "") {
            var node = document.createElement("LI");
            var textnode1 = document.createTextNode(klas1 + " " + naam1);
            node.appendChild(textnode1);
            document.getElementById("lijst1").appendChild(node);
        }
    }
    //tweede ploeg
    function changeText2() {
        var klas2 = document.getElementById('klas2').value;
        var naam2 = document.getElementById('naam2').value;
        if (document.getElementById('klas2').value != "" && document.getElementById('naam2').value != "") {
            var node = document.createElement("LI");
            var textnode2 = document.createTextNode(klas2 + " " + naam2);
            node.appendChild(textnode2);
            document.getElementById("lijst2").appendChild(node);
        }
    }
    //derde ploeg
    function changeText3() {
        var klas3 = document.getElementById('klas3').value;
        var naam3 = document.getElementById('naam3').value;
        if (document.getElementById('klas3').value != "" && document.getElementById('naam3').value != "") {
            var node = document.createElement("LI");
            var textnode3 = document.createTextNode(klas3 + " " + naam3);
            node.appendChild(textnode3);
            document.getElementById("lijst3").appendChild(node);
        }
    }
    //vierde ploeg
    function changeText4() {
        var klas4 = document.getElementById('klas4').value;
        var naam4 = document.getElementById('naam4').value;
        if (document.getElementById('klas4').value != "" && document.getElementById('naam4').value != "") {
            var node = document.createElement("LI");
            var textnode4 = document.createTextNode(klas4 + " " + naam4);
            node.appendChild(textnode4);
            document.getElementById("lijst4").appendChild(node);
        }
    }

Answer 1

@SpencerWieczorek 没错，PHP 和 MySql 可以满足您的需要。但是，那里有一点学习曲线。

对于初学者，我建议使用 Parse。它是免费的，它使保存和检索数据变得微不足道。下面是一个简单的应用程序，它允许用户输入 class 年份和他们的名字并保存它们，以便其他人可以在同一页面上看到它们。

由于 SO 限制，此处的代码段无法使用...

...但是这里有一个 working jsfiddle

这是用普通的 ole javascript BTW

完成的

要自行完成此操作，您需要：

您需要前往 https://www.parse.com/#signup 并使用他们创建一个帐户
转到 https://www.parse.com/apps/new 并创建一个应用
在你的 html 的头标签中添加这个 <script type="text/javascript" src="https://www.parsecdn.com/js/parse-1.3.0.min.js"></script>
从下拉菜单（右上角）转到 https://www.parse.com/apps/quickstart#parse_data/web/new，select 您的应用，Parse.initialize() 功能将与您应用的 应用程序 ID 和 JavaScript 密钥，复制此行供以后使用
将我示例中的 Parse.initialize() 函数替换为您在步骤 4 中复制的函数
阅读他们的 javascript guide here 看看你能用 parse
要更深入地了解，请查看 Parse JavaScript SDK & Cloud Code Reference

如果愿意，您还可以使用其他脚本语言与 parse 进行交互。

Parse 在达到一定使用量之前是免费的。我有一个每天有 100 多个用户使用的应用程序，几乎不需要支付任何费用。

Parse.initialize("Application ID", "JavaScript key");

function saveInput(){
        //get our new values 
        var klassYear = document.getElementById('klassYear').value.trim();
        var studentName = document.getElementById('studentName').value.trim();
  
        
       // dont continue if either value is blank
       if(klassYear=="" ||studentName=="" ){
           alert ('Please fill in both fields.') ;
           return; 
       }
       
   
        // create the `Parse` object
        var Klass = Parse.Object.extend("Klass");
  var _klass = new Klass();
  
        // set the object's values to our input values
  _klass.set("klassYear", klassYear);
  _klass.set("studentName", studentName);
  
        // save the object
  _klass.save(null, {
    success: function(_klass) {
            // if the save succeeded, add the new info to our page
            retrieveSavedInputs()
            
    },
    error: function(_klass, error) {
            // save failed, do error handeling here
   console.log('Failed to create new object, with error code: ' + error.message);
    }
     });
  }


function retrieveSavedInputs(){
     
      // create a query to search for  our `Klass` items
      var Klass = Parse.Object.extend("Klass");
      var query = new Parse.Query(Klass);
          query.find({
   success: function(results) {
            
              // get our table's `tbody`  and clear it
              var myTbl = document.getElementById('mytbl');
              myTbl.innerHTML='';
              
              // `results` is an array of all the matches
              // loop through each
              for(var i =0; i < results.length; i++){
                
                  // get the values from the saved object
                  // note that `klassYear` and `studentName` 
                  // are not available within the scope of the `success` function
                  var k = results[i].get("klassYear")
                  var s = results[i].get("studentName")
            
                  // create a table row with the info and add it at the top of `contents`
                 myTbl.innerHTML = '<tr><td>'+k+'</td><td>'+s+'</td></tr>' + myTbl.innerHTML;
                  
                              
              }
   },
   error: function(error) {
   console.log("Error: " + error.code + " " + error.message);
   }
      });
}

// load all previously saved items
window.onload = retrieveSavedInputs(); 

//clcik handeler for the btn
document.getElementById("myBtn").addEventListener('click', saveInput , false);

table{
  margin-top:50px;
  }

 Class Year: <input type="text" id="klassYear"  value=""/> <br>
 Name: <input type="text" id="studentName" value=""/> <br>


 <input type="button" id="myBtn" value="Submit" class="button" />
<br> Add a ame and year above and see it added to the list below
    
<div id="myDiv"></div>


<table  width="400" border="1">
   <thead>    
       <tr>
          <th scope="col">Class Year</th>
          <th scope="col">Student Name</th>
       </tr>
  </thead>     
  <tbody id="mytbl">
  </tbody>
</table> Class Year: <input type="text" id="klassYear"  value=""/> <br>
 Name: <input type="text" id="studentName" value=""/> <br>


 <input type="button" id="myBtn" value="Submit" class="button" />
<br> Add a ame and year above and see it added to the list below
    
<div id="myDiv"></div>


<table  width="400" border="1">
   <thead>    
       <tr>
          <th scope="col">Class Year</th>
          <th scope="col">Student Name</th>
       </tr>
  </thead>     
  <tbody id="mytbl">
  </tbody>
</table>

使用 javascript 从数据库保存和检索用户输入？

Save and retrieve user input from database with javascript?

html

javascript

database

由于 SO 限制，此处的代码段无法使用...

...但是这里有一个 working jsfiddle