使用javascript保存和检索用户输入数据库？ [英] Save and retrieve user input from database with javascript?

查看：307
本文介绍了使用javascript保存和检索用户输入数据库？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



这个想法是，人们填写他们的班级号码，他们的名字，一旦他们按下一个按钮，这两个值被添加到页面，并可以访问网站的每个人查看。



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



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



有人可以帮助我有人知道一个来源，我可以找到一个解决方案吗？我的搜索没有任何内容。



对不起，如果我听起来像一个帮助吸血鬼。



HTML：

 < body> 
< div id =wrapper> 
< div id =header> 
< h2 id =title>Italiëreis2015：opdiening tijdens quiz< / h2> 
< / div> 
< div id =content> 
<！ -  eerste ploeg  - > 
< div class =L> 
< p id =kop> Ploeg 1< / p> 
< p class =klas>< input type =textid =klas1class =textmaxlength =2placeholder =Klas/>< / p& 
< p class =naam>< input type =textid =naam1class =textplaceholder =Naam/>< / p& 
< input type =buttononclick =changeText1（）value =Schrijf inclass =button/> 
< br> 
< p>芦苇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 =textid =klas2class =textmaxlength =2placeholder =Klas/>< / p& 
< p class =naam>< input type =textid =naam2class =textplaceholder =Naam/>< / p& 
< input type =buttononclick =changeText2（）value =Schrijf inclass =button/> 
< br> 
< p>芦苇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 =textid =klas3class =textmaxlength =2placeholder =Klas/>< / p& 
< p class =naam>< input type =textid =naam3class =textplaceholder =Naam/>< / p& 
< input type =buttononclick =changeText3（）value =Schrijf inclass =button/> 
< br> 
< p>芦苇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 =textid =klas4class =textmaxlength =2placeholder =Klas/>< / p& 
< p class =naam>< input type =textid =naam4class =textplaceholder =Naam/>< / p& 
< input type =buttononclick =changeText4（）value =Schrijf inclass =button/> 
< br> 
< p>芦苇ingeschreven mensen：< / p> 
< div class =overflow> 
< ol id =lijst4>< / ol> 
< / div> 
< / div> 
< / div> 
< div id =footer> 
< div id =credits>代码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！=&&&&&&&&&&&& （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！=&&&&&&&&&& （LI）; 
 var textnode2 = document.createTextNode（klas2 ++ naam2）; 
 node.appendChild（textnode2）; 
 document.getElementById（lijst2）。appendChild（node）; 
} 
} 
 // derde ploeg 
 function changeText3（）{
 var klas3 = document.getElementById（'klas3'）。 
 var naam3 = document.getElementById（'naam3'）。value; 
 if（document.getElementById（'klas3'）。value！=&&&&&&&&&  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'）。 
 var naam4 = document.getElementById（'naam4'）。value; 
 if（document.getElementById（'klas4'）。value！=&&& amp;&&&&&&&&&&  value！=）{
 var node = document.createElement （LI）; 
 var textnode4 = document.createTextNode（klas4 ++ naam4）; 
 node.appendChild（textnode4）; 
 document.getElementById（lijst4）。appendChild（node）; 
} 
}


解决方案

SpencerWieczorek没有错， PHP 和 MySql 将为您所需要的工作。然而，这里有一点学习曲线。



对于初学者，我建议您使用解析。它是免费的，它使保存和检索数据不重要。下面是一个简单的应用程序，让用户输入一个类年和​​他们的名字，并保存，以便其他人可以在同一页上看到他们。



此处的代码段由于SO限制而无法工作...



...但这里是< a href =http://jsfiddle.net/DelightedDoD/sy1bb8xb/ =nofollow> working jsfiddle



这是用简单的ole javascript BTW





要自己完成此操作，您需要： p>


  1. 您需要前往 https://www.parse.com/#signup 并与他们建立帐户


  2. 前往 https://www.parse.com/apps/new 并创建应用


  3. 在您的HTML标头< script type =text / javascriptsrc =https://www.parsecdn.com/js/parse- 1.3.0.min.js>< / script>


  4. 前往 https://www.parse.com/apps/quickstart#parse_data/web/new ，选择您的应用程式从下拉列表（右上角）， Parse.initialize（）函数将在此显示您的应用程序的应用程序ID 和 JavaScript

    5. 在我的示例中，使用您在第4步中复制的邮件


  5. 阅读 javascript指南，看看您可以用parse


  6. 做些什么， 解析JavaScript SDK& Cloud代码参考


如果愿意，您还可以与其他脚本语言进行语法分析。





Parse可免费使用一定量的使用量。我有一个应用程序，每天由100多个用户使用，并没有来到任何地方，不得不支付任何东西。 



  Parse.initialize（Application ID，JavaScript key）; function saveInput（）{//获取新值var klassYear = document.getElementById（'klassYear'）。value.trim（）; var studentName = document.getElementById（'studentName'）。value.trim（）; //不要继续，如果任何一个值为空if（klassYear ==|| studentName ==）{alert（'请填写两个字段。返回; } //创建`Parse`对象var Klass = Parse.Object.extend（Klass）; var _klass = new Klass（）; //将对象的值设置为我们的输入值_klass.set（klassYear，klassYear）; _klass.set（studentName，studentName）; //保存对象_klass.save（null，{success：function（_klass）{//如果保存成功，将新信息添加到我们的页面retrieveSavedInputs（）}，错误：function（_klass，error）{// save失败，在这里做错误处理console.log（'无法创建新对象，具有错误代码：'+ error.message）;}}）; } function retrieveSavedInputs（）{//创建一个查询来搜索我们的`Klass`项目var Klass = Parse.Object.extend（Klass）; var query = new Parse.Query（Klass）; query.find（{success：function（results）{//获取表的`tbody`并清除var myTbl = document.getElementById（'mytbl'）; myTbl.innerHTML =''; //`results`是一个数组的所有匹配//循环遍历每个for（var i = 0; i  

  table {margin-top：50px; }


I'm working on a small, temporary site that will be used for collecting some names.

The idea is that people fill in the number of their class and their name and once they press a button, these two values are added to the page and can be viewed by everyone who visits the site.

I've already made a concept of this using javascript: www.googledrive.com/host/0B_eZKT0Ni3-tOXF5OVVQeWZRRjQ

The only problem is that the items aren't really stored on the site. As far as I know, you can only accomplish this using a database, but I have no experience with linking a database to a webpage.

Can someone help me with this or does someone know a source where I can find a solution for this? My searches turned up nothing.

I'm sorry if I'm sounding like a "help vampire". I only turned to you guys for a solution because I can't find it anywhere else.

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 is irrelevant.

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

解决方案

@SpencerWieczorek is not wrong, PHP and MySql will work for what you need. However, there is a bit of a learning curve there.

For a beginner, I'd recommend using Parse. It's free and it makes saving and retrieving data trivial. Below is simple app that lets the user input a class year and their name and saves them so others can see them on the same page.

The snippet here wont work due to SO restrictions...

...but here is a working jsfiddle

This is accomplished with plain ole javascript BTW

To get this going on your own you'll need to:

  1. You'll need to go to https://www.parse.com/#signup and create an account with them

  2. Go to https://www.parse.com/apps/new and create an app

  3. add this in your html's head tag <script type="text/javascript" src="https://www.parsecdn.com/js/parse-1.3.0.min.js"></script>

  4. Go to https://www.parse.com/apps/quickstart#parse_data/web/new, select your app from the dropdow (top-ish right) the Parse.initialize() function will be shown here with your app's Application ID and JavaScript key, copy this line for later

  5. Replace the Parse.initialize() function in my example with the one you copied in step 4

  6. Read up on the their javascript guide here to see what all you can do with parse

  7. for a more indepth look, check out the Parse JavaScript SDK & Cloud Code Reference

You can also interact with parse with other scripting languages if you'd like.

Parse is free up to a certain amount of usage. I have one app that's used daily by 100+ users and doesn't come anywhere near having to pay anything. 

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保存和检索用户输入数据库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆