javascript - onClick 来自数据库的随机播放按钮

标签 javascript php html button shuffle

例如我有这句话,“我喜欢弹钢琴。”它分为 4 个元素,将从数据库(myphpadmin)中取出。如何才能使其只有当我按下随机播放按钮时,它才会随机播放。

   <body>
   <?php
// Connect to database server
mysql_connect("localhost", "root", "password") or die (mysql_error ());

// Select database
mysql_select_db("login") or die(mysql_error());

// Get data from the database depending on the value of the id in the URL
$strSQL = "SELECT * FROM sentences WHERE id 
    ORDER BY RAND() LIMIT 1;";

//create an array with numbers 1-4
$order = array(1,2,3,4);

//shuffle them in random order
shuffle($order);

$rs = mysql_query($strSQL);

// Loop the recordset $rs
while($row = mysql_fetch_array($rs)) {
    // Write the data of the person
    //Display all the array values from 0-3 (array index starts from 0)
    echo "<dt>Sentence:</dt><dd>" . $row[$order[0]] . " " . $row[$order[1]] . " " .                       
    $row[$order[2]] . " " . $row[$order[3]] ."</dd>";

    }
// Close the database connection
mysql_close();
?>

   <button onClick="Shuffle()">Scramble</button>

    </body>

最佳答案

您基本上需要使用 jQuery 来执行此操作.

利用jQuery.get()对单独的 php 脚本运行 ajax 请求。 基本上你会有一个 php 脚本,你的代码设置如下:

我们称之为sentence.php

<?php
// Connect to database server
mysql_connect("localhost", "root", "password") or die (mysql_error ());

// Select database
mysql_select_db("login") or die(mysql_error());

// Get data from the database depending on the value of the id in the URL
$strSQL = "SELECT * FROM sentences WHERE id 
    ORDER BY RAND() LIMIT 1;";

//create an array with numbers 1-4
$order = array(1,2,3,4);

//shuffle them in random order
shuffle($order);

$rs = mysql_query($strSQL);

// Loop the recordset $rs
while($row = mysql_fetch_array($rs)) {
    // Write the data of the person
    //Display all the array values from 0-3 (array index starts from 0)
    echo "<dt>Sentence:</dt><dd>" . $row[$order[0]] . " " . $row[$order[1]] . " " .                       
    $row[$order[2]] . " " . $row[$order[3]] ."</dd>";

    }
// Close the database connection
mysql_close();
?>

现在您已经有了 html 文件,我们将其命名为 index.html

<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="script.js" type="text/javascript"></script>
    </head>

    <body>
        <button id="showcontent">Scramble</button>
        <div id="content"></div>
    </body>

</html>

在您的 script.js 中,您将运行 jQuery。

$(document).ready(function() {

    $(document).on('click', '#showcontent', function(event) {
        event.preventDefault();

        $.get("sentence.php", function(data) {
            $("div#content").html(data);
        });
    });

});

关于javascript - onClick 来自数据库的随机播放按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23902067/

相关文章:

javascript - 如何获取 Angular 8 中的响应 header

javascript - 第7章, Eloquent JavaScript : LifelikeWorld

php - 生产时 symfony 错误 500 而不是 404

php - 来自脚本的格式错误的 header 。错误 header =1 : index. php

javascript - 有没有办法让链接不可点击,但仍然使用 :hover?

html - CSS - 在不使用其样式的情况下在另一个样式列表中添加列表

javascript - 在使用 lodash 的 partialRight 创建的部分函数上解决未设置的 "length"属性

javascript - Plottable.js 折线图不显示

javascript - 使用php,ajax从数据库中获取数据

javascript - 在 javascript/HTML5 中建立直接的 udp 连接