使用javascript保存和检索数据库中的用户输入？_Javascript_Html_Database

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

javascript html database

使用javascript保存和检索数据库中的用户输入？,javascript,html,database,Javascript,Html,Database,我在一个小的临时网站上工作，这个网站将用来收集一些名字这个想法是，人们填写他们的班级号码和姓名，一旦按下按钮，这两个值就会被添加到页面中，每个访问该网站的人都可以看到我已经使用javascript对此有了一个概念：唯一的问题是这些项目并没有真正存储在网站上。据我所知，您只能使用数据库来实现这一点，但我没有将数据库链接到网页的经验有人能帮我解决这个问题吗？或者有人知道我可以找到解决方案的来源吗？我的搜索结果一无所获如果我听起来像个“救命吸血鬼”，我很抱歉。我只是向你们寻求解决办法，因为我

我在一个小的临时网站上工作，这个网站将用来收集一些名字

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

我已经使用javascript对此有了一个概念：

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

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

如果我听起来像个“救命吸血鬼”，我很抱歉。我只是向你们寻求解决办法，因为我在其他地方找不到

HTML:

@SpencerWieczorek没有错，

PHP

和

MySql

可以满足您的需要。然而，这里有一点学习曲线

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

这里的代码片段由于太多限制而无法工作。。。 …但这里有一个这是通过普通的olejavascript实现的

要让这一切自行进行，您需要：

您需要转到并与他们建立一个帐户

转到并创建一个应用程序

将此添加到html的头标签

转到，从下拉菜单（右上角）中选择你的应用程序。

Parse.initialize（）

函数将在此处显示，其中包含你的应用程序的应用程序ID和JavaScript键，请稍后复制此行

将示例中的

Parse.initialize（）

函数替换为步骤4中复制的函数

阅读他们的文章，看看你能用parse做些什么

要获得更深入的了解，请查看

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

解析在一定程度上是免费的。我有一个应用程序，每天有100多名用户使用，而且几乎不需要支付任何费用

Parse.initialize（“应用程序ID”、“JavaScript键”）；
函数saveInput（）{
//获取我们的新价值观
var klassYear=document.getElementById（'klassYear'）.value.trim（）；
var studentName=document.getElementById（'studentName'）.value.trim（）；
//如果其中一个值为空，则不要继续
如果（klassYear==“”| | studentName==“”）{
警报（'请填写两个字段'）；
返回；
}
//创建'Parse'对象
var Klass=Parse.Object.extend（“Klass”）；
var_klass=新的klass（）；
//将对象的值设置为我们的输入值
_klass.set（“klassYear”，klassYear）；
_klass.set（“studentName”，studentName）；
//保存对象
_klass.save（null{
成功：功能（klass）{
//如果保存成功，请将新信息添加到我们的页面
retrieveSavedInputs（）
},
错误：函数（_klass，error）{
//保存失败，请在此执行错误处理
console.log（'创建新对象失败，错误代码：'+error.message）；
}
});
}
函数retrieveSavedInputs（）{
//创建查询以搜索我们的“Klass”项
var Klass=Parse.Object.extend（“Klass”）；
var query=newparse.query（Klass）；
查询.查找({
成功：功能（结果）{
//把我们的桌子弄干净
var myTbl=document.getElementById（'myTbl'）；
myTbl.innerHTML=''；
//'results'是所有匹配项的数组
//循环通过每个
对于（var i=0；i
表格{
边缘顶部：50px；
}
学年：

名称：


在上面添加ame和year，并将其添加到下面的列表中
学年
学名
学年：

名称：


在上面添加ame和year，并将其添加到下面的列表中
学年
学名
我重新开始查找PHP
和MySQL
PHP是服务器端的语言，用于与服务器和数据库交互。MySQL是一个关系数据库管理系统，我可以使用它。唯一的问题是，我无法使用存储在本地文件中的代码在浏览器中运行它。JSFIDLE链接可以工作，但当我将其复制到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>

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