使用 html 和 php 从 xampp sql server 获取数据答案

【问题标题】：get data from xampp sql server using html and php使用 html 和 php 从 xampp sql server 获取数据
【发布时间】：2020-11-18 18:02:03
【问题描述】：

我是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 发送字符串。感谢您对此的帮助。提前谢谢你。

【问题讨论】：

我觉得这不是您需要的问题的具体答案，这是一门 PHP 快速课程。只是谷歌“PHP 从数据库中获取数据”？

标签： javascript php html mysql xampp

【解决方案1】：

首先创建一个表：

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 代码。

【讨论】：

php 文件是我创建并插入到我的 html 文件中的新文件？非常感谢您的回答
假设文件名为“hangman.php”。您可以在其中插入常规 HTML 代码。在要插入随机名称的确切位置，您可以使用将其关闭。为了更简洁的例子，我会稍微修改一下我的答案。
嗨，我再次设法在我的页面中加载了随机岛屿名称。但是，在修改我的 js 代码之后，它仍然会在修改之前加载我的旧 js 代码。我用 ctrl + S 保存我的代码。哪个可能是问题？也许是因为我在 localhost 上运行？
缓存？试试 CTRL+F5