doudao1922 2015-03-17 20:31
浏览 58
已采纳

将AJAX实现为具有多个选择的PHP页面

very new coder here.

I have a page with four select inputs each with two possible options, and when all of the selections have a value and a submit button is clicked a certain song (1 of 16 based on the selections made) will echo out into an audioplayer.

In its current state I have been able to connect to my database which echos out the links and titles for the audio tracks.

My issue is that I want all of the selections to visually retain their option values once the submit button is clicked so that users can see what options they have selected for the current song that is playing.

I've found lots of examples online of implementing AJAX into a page with one selection that activates via an onchange event such as this one from W3 Schools http://www.w3schools.com/php/php_ajax_database.asp, but nothing with multiple selections and a submit button.

Someone from this community helped me out the other day so that the code for the W3 schools example could accommodate a submit button onclick event instead of the onchange on the select input, but with my lack of much fluency with PHP/Javascript I don't really have an idea of how to include multiple selections.

I was hoping someone could take a look at how far I got in my page with multiple selections but no AJAX implemented and explain to me in very simple terms how I could go about including AJAX so that the select options are visible once the submit button has been clicked. If one could even show me a version of my page with AJAX placed with comments to explain the process would be absolutely golden.

Here is my page...

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="favicon.ico"/>
<title>MoodTunes -- Tunes for your mood</title>
<script src="prefixfree.min.js"></script>
</head>

<body>
<?php

$myDatabase = mysql_connect("localhost","root","root");
if (!myDatabase) die ('Oh dear.' . mysql_error());

if(isset($_GET['submit'])){
mysql_select_db("tunes",$myDatabase);
$volume = $_GET['volume'];
$tempo = $_GET['tempo'];
$complexity = $_GET['complexity'];
$key = $_GET['key'];
$query = "SELECT * FROM music WHERE volumeOption='".$volume."' AND tempoOption='".$tempo."' AND complexityOption='".$complexity."' AND keySignatureOption='".$key."'";
$mydata = mysql_query($query, $myDatabase) or die(mysql_error());
while($row = mysql_fetch_array($mydata)){

echo "<div id='submitContent'>";
echo "<h3><span>Now Playing:</span> " . $row['title'] . "</h3>";
echo "<figure id='audioplayer' style='display:inline-block;'>";
echo "<audio id='audiotrack' controls loop>";
echo "<source src='" . $row['link'] . "'type='audio/mpeg'>";
echo "</audio>";
echo "</figure>";

}
mysql_close($myDatabase);
}

?>

</div>

<header>
    <div>
        <h1>
            <img src="assets/images/logo.png" alt="">
        </h1>
        <h2>Tunes for <span>your</span> mood</h2>
    </div>
</header>

<main>
    <h4>Choose your tune criteria</h4>
    <form>

        <label for="volume"></label>
            <select name="volume" id="volume">
            <option>Select One</option>
            <option value="0" id="loud">heavy</option>
            <option value="1" id="quiet">soft</option>
            </select>
        </label>

        <label for="tempo"></label>
        <select name="tempo" id="tempo">
        <option>Select One</option>
        <option value="0" id="fast">fast</option>
        <option value="1" id="slow">slow</option>
        </select>
        </label>

        <label for="complexity"></label>
        <select name="complexity" id="complexity">
        <option>Select One</option>
        <option value="0" id="complex">complex</option>
        <option value="1" id="simple">simple</option>
        </select>
        </label>

        <label for="key"></label>
        <select name="key" id="key">
        <option>Select One</option>
        <option value="0" id="minor">minor key</option>
        <option value="1" id="major">major key</option>
        </select>
        </label>   
<div id="submitDiv">

<input type="submit" name="submit" id="submit" value="Get My Tune!">
</div>

</form>

</main>

</body>
</html>

Any help would be greatly appreciated. Like I said, I'm still very new to much coding so please answer simply if you can help me out. Thanks.

  • 写回答

2条回答 默认 最新

  • douba1904 2015-03-17 23:06
    关注

    I suggest splitting into 2 files: an HTML file and a PHP file. Keep the PHP separate and call it with an XHR object (Ajax).

    music.html

    <!-- skipped top stuff -->

<body>

<!-- replace your PHP code with straight HTML -->
<div id='submitContent'>
  <h3><span>Now Playing:</span> <span id="musictitle"></span></h3>
  <figure id='audioplayer' style='display:inline-block;'>
    <audio id='audiotrack' controls loop>
      <source id="musiclink" src='' type='audio/mpeg'>
    </audio>
  </figure>
</div>

<!-- skipped middle stuff -->

<form id="musicform"> <!-- give your form an id -->
  <!-- skipped form stuff -->
</form>

<!-- add script tag to bottom of body -->
<script>

// function to handle music selection
function get_selection () {

    // instantiate music url
    var url = 'music.php'

    // get form values or defaults
    var musicform = document.getElementById('musicform')
    url += ('Select One' == musicform.volume.value)?     '?volume=1':     '?volume='     + musicform.volume.value
    url += ('Select One' == musicform.tempo.value)?      '&tempo=1':      '&tempo='      + musicform.tempo.value
    url += ('Select One' == musicform.complexity.value)? '&complexity=1': '&complexity=' + musicform.complexity.value
    url += ('Select One' == musicform.key.value)?        '&key=1':        '&key='        + musicform.key.value

    // set up XHR object
    var xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    // handle response
    xhr.onload = function () {
        //console.log(this.responseText)
        var music = JSON.parse(this.responseText)
        document.getElementById('musictitle').innerHTML = music.title
        var audio = document.getElementById('audiotrack')
        document.getElementById('musiclink').src = music.link
        audio.load()
        audio.play()
    }
    xhr.send()
}

// hook up music selection function to form submit
document.getElementById('musicform').addEventListener('submit', function(evt){
    evt.preventDefault()
    get_selection()
})

// execute music selection function at least once
get_selection()

</script>

</body>
</html>

    music.php

    <?php

$myDatabase = mysqli_connect("localhost","root", "root", "tunes");

$stmt = mysqli_prepare($myDatabase
  , "SELECT title, link FROM music WHERE volumeOption = ? AND tempoOption = ? AND complexityOption = ? AND keySignatureOption = ?"
) or die(mysqli_error($myDatabase));
mysqli_stmt_bind_param($stmt, 'ssss', $_GET['volume'], $_GET['tempo'], $_GET['complexity'], $_GET['key']);
mysqli_stmt_execute($stmt);
mysqli_stmt_bind_result($stmt, $title, $link);

mysqli_stmt_fetch($stmt); // assuming only one result
echo '{"title": "' . $title . '", "link": "' . $link . '"}';

mysqli_close($myDatabase);

?>

    And I'm using PHP MySQLi prepared statements for database access for security and the fact plain old PHP MySQL functions are deprecated.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
  • ¥20 软件测试决策法疑问求解答
  • ¥15 win11 23H2删除推荐的项目，支持注册表等
  • ¥15 matlab 用yalmip搭建模型，cplex求解，线性化处理的方法
  • ¥15 qt6.6.3 基于百度云的语音识别 不会改
  • ¥15 关于#目标检测#的问题：大概就是类似后台自动检测某下架商品的库存，在他监测到该商品上架并且可以购买的瞬间点击立即购买下单
  • ¥15 神经网络怎么把隐含层变量融合到损失函数中？
  • ¥15 lingo18勾选global solver求解使用的算法
  • ¥15 全部备份安卓app数据包括密码，可以复制到另一手机上运行
  • ¥20 测距传感器数据手册i2c