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

时间：2015-01-10 21:35:09

标签： javascript html database

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

这个想法是人们填写他们的班级和姓名，一旦按下按钮，这两个值就会被添加到页面中，并且每个访问该网站的人都可以查看这些值。

我已经使用javascript创建了这个概念：www.googledrive.com/host/0B_eZKT0Ni3-tOXF5OVVQeWZRRjQ

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

有人可以帮助我，或者有人知道我可以找到解决方案的来源吗？我的搜索没有任何结果。

如果我听起来像是“帮助吸血鬼”，我很抱歉。我只是求助于你们寻求解决方案，因为我无法在其他任何地方找到它。

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);
        }
    }

1 个答案:

答案 0 :(得分：2)

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

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

由于SO的限制，此处的片段无法正常工作......

...但这里是working jsfiddle

这是通过简单的javascript BTW

完成的

要实现这一目标，您需要：

  1. 您需要转到https://www.parse.com/#signup并创建一个帐户

  2. 转到https://www.parse.com/apps/new并创建应用

  3. 在html的标题<script type="text/javascript" src="https://www.parsecdn.com/js/parse-1.3.0.min.js"></script>

    4. 中添加此内容

  4. 转到https://www.parse.com/apps/quickstart#parse_data/web/new，从下拉列表中选择您的应用（右上角）此处将显示Parse.initialize()功能，其中包含您应用的应用ID ， JavaScript密钥，请将此行复制到以后

  5. 将我的示例中的Parse.initialize()函数替换为您在步骤4中复制的函数

  6. 阅读他们的javascript guide here，看看你能用解析做什么

  7. 更深入一点，请查看Parse JavaScript SDK & Cloud Code Reference

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

    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>

相关问题
最新问题