这里是非常新的编码员。
我有一个包含四个选择输入的页面，每个输入都有两个可能的选项，当所有选择都有一个值并且单击提交按钮时，某首歌曲(基于所做的选择的 16 首歌曲中的一首)将回显为音频播放器。
在当前状态下，我已经能够连接到我的数据库，该数据库回显音轨的链接和标题。
我的问题是，我希望在单击提交按钮后，所有选择都在视觉上保留其选项值，以便用户可以看到他们为当前正在播放的歌曲选择了哪些选项。
我在网上找到了很多将 AJAX 实现到页面的示例，其中一个选择通过 onchange 事件激活，例如来自 W3 Schools 的这个 http://www.w3schools.com/php/php_ajax_database.asp ，但没有多项选择和提交按钮。
这个社区的某个人前几天帮助了我，以便 W3 学校示例的代码可以容纳提交按钮的 onclick 事件，而不是选择输入上的 onchange，但由于我对 PHP/Javascript 不够熟练，我真的不知道如何包含多项选择。
我希望有人可以看看我在页面中进行了多选但没有实现 AJAX，并以非常简单的方式向我解释了如何包含 AJAX，以便选择选项在提交按钮已被点击。如果有人甚至可以向我展示一个带有 AJAX 的页面版本，并附有评论来解释该过程，那将是绝对的黄金。
这是我的页面...
<!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>
如有任何帮助，我们将不胜感激。就像我说的，我对很多编码还是很陌生，所以如果你能帮助我，请简单地回答。谢谢。
最佳答案
我建议分成 2 个文件:一个 HTML 文件和一个 PHP 文件。保持 PHP 独立并使用 XHR 对象 (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);
?>
为了安全起见，我使用 PHP MySQLi 准备好的语句访问数据库，事实上，普通的旧 PHP MySQL 函数已被弃用。
关于php - 将 AJAX 实现到具有多个选择的 PHP 页面中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29109107/