文章/答案/技术大牛

发布

社区首页 >问答首页 >使用html和php从xampp sql server获取数据。

问使用html和php从xampp sql server获取数据。
EN

Stack Overflow用户

提问于 2020-07-29 15:40:00

回答 1查看 312关注 0票数 0

我是一个完整的php初学者，我正在做一个前端项目，在这个项目中，我必须创建一个基于存储在mysql xampp server中的12个岛屿名称的绞刑者游戏。我必须从数据库中获取一个random岛，作为显示在我的html中的unordered string，并猜测它是哪个岛。我不知道如何使用php实现这一点，因为我是一个完全的初学者，但我看过关于如何用php从html表单发送数据到sql server的教程。我猜这是一种相反的任务。我已经写了完整的html css and js代码来显示我的绞刑者游戏，我使用一个简单的单词通过javascript随机显示，当你填满spaces时，一个submit按钮出现。

function hangman(){
    var island = "Santorini"; //the given word that is supposed to be found 
    var t = document.createTextNode(shuffleWord(island))
    document.getElementById("hidden-word").appendChild(t);
    createSpaces(island);
    
    const inputLists = document.querySelectorAll("input");
    document.querySelectorAll("input").forEach(el => {
      el.addEventListener('input', evt => {
          const showButton = [...inputLists].filter(ip => ip.value.trim() !== '').length === inputLists.length;
          document.getElementById('submitbtn').style.display = showButton ? 'block' : 'none';
      });
    });

}

function shuffleWord (word){
    var shuffledWord = '';
    word = word.split('');
    while (word.length > 0) {
      shuffledWord +=  word.splice(word.length * Math.random() << 0, 1);
    }
    return shuffledWord;
}


function createSpaces(text){
    for(var i=0;i<text.length;i++){
      var space = document.createElement("input");
      space.setAttribute("class" , "dash");
      document.getElementById("hangman-container").appendChild(space);
    }
}

.transparent-box{
    border:none;
    position:absolute;
    top:10%;
    left:15%;
    background-color:black;
    height:500px;
    width:70%;
    opacity: 0.6;
}

.transparent-box p{
    color:white;  
    text-align:center;

}

.transparent-box h1{
    color:white;
    position: relative;
    text-align:center;
    font-size:20px;
    top:30px;
}


#hangman-container{
    position: relative;
    width:auto;
    top:30%;
    left:0%;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}


.dash{
    margin:0;
    padding:20px;
    align-items: flex-start;
    width:4%;
    border:none;
    border-radius: 5%;
    background-color: turquoise;
    color:red;
    font-size:40px;
}

.dash:focus{
    opacity:0.8;
}

#submitbtn{
    display: none;
    position: absolute;
    top:200%;
    left:80%;
    float:right; 
}

<body onload=hangman()>
<div class="transparent-box" id="t-box">
    <p>Play here </p>
    <h1 id="hidden-word">The word is : </h1>
    <form id="hangman-container" method="POST">
        <button type="submit" class="hide" id="submitbtn">Submit</button>
    </form>
</div>
</body>

问题是如何使用php从我的数据库中获取一个随机的岛名称并显示它，而不是通过javascript发送一个字符串。我将非常感谢你在这件事上的帮助。提前谢谢你。

javascript

php

html

mysql

xampp

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-29 16:30:03

首先创建一个表：

CREATE TABLE islands(
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL
);

在此处插入岛屿名称(可根据需要添加任意数量的岛屿来代替...)：

INSERT INTO islands(name) VALUES
("Santorini"),("Tassos"),...;

现在，下面的SELECT查询将从数据库中获取一个随机的岛名称：

SELECT name
FROM islands
ORDER BY RAND()
LIMIT 1;

在PHP中，您可以像这样执行查询：

// replace the words in uppercase with your actual credentials!
$link = @mysqli_connect('localhost','USERNAME','PASSWORD','DBNAME');
if(!$link){
    echo 'Error connecting to the DB';
    exit;
}
$sql = "SELECT name FROM islands ORDER BY RAND() LIMIT 1";
$result = @mysqli_query($link, $sql);
if(!$result){
    echo 'There is an issue with the database';
    exit;
}
$row = @mysqli_fetch_assoc($result);
// This will give you the random island name (if they are inserted properly)
echo $row['name']??'No islands are inserted in the database yet';

现在，我们可以使用str_shuffle()函数对其进行混洗。最后，您的代码可能会如下所示：

<body onload=hangman()>
<div class="transparent-box" id="t-box">
    <p>Play here </p>
    <h1 id="hidden-word">The word is : 
    <?php
        // replace the words in uppercase with your actual credentials!
        $link = @mysqli_connect('localhost','USERNAME','PASSWORD','DBNAME');
        if(!$link){
            echo 'Error connecting to the DB';
            exit;
        }
        $sql = "SELECT name FROM islands ORDER BY RAND() LIMIT 1";
        $result = @mysqli_query($link, $sql);
        if(!$result){
            echo 'There is an issue with the database';
            exit;
        }
        $row = @mysqli_fetch_assoc($result);
        echo str_shuffle($row['name']);
    ?>
    </h1>
    <form id="hangman-container" method="POST">
        <button type="submit" class="hide" id="submitbtn">Submit</button>
    </form>
</div>
</body>

当然，现在您需要调整您的JavaScript代码。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63148650

复制

相似问题

问使用html和php从xampp sql server获取数据。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用html和php从xampp sql server获取数据。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用html和php从xampp sql server获取数据。
EN