Question

我正在尝试创建一个与W3schools.com上发现的'PHP AJAX和MySQL'示例类似的页面http://www.w3schools.com/php/php_ajax_database.asp

主要区别在于我想要更改它，因此一旦在表单中进行选择就触发的onchange函数是一个onclick函数，一旦单击提交按钮就会触发该函数。这是因为想要最终在表单中包含四个不同的选择输入而不是一个。

我制作了一个测试表，并且能够使用onchange函数使其正常运行，但我只是不确定如何通过包含提交按钮来改变事物。

这是我的index.php页面......

<html>
<head>

<script>
function showSong(str) {
if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
} else { 
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getmusic.php?q="+str,true);
    xmlhttp.send();
 }
 }
</script>

</head>
<body>

<form>
<select name="volume" onchange="showSong(this.value)">
<option value="">Select volume:</option>
<option value="0">Heavy</option>
<option value="1">Soft</option>

</select>

</form>
<div id="txtHint"><b>Music info will be listed here...</b></div>
</body>
</html>

链接的getmusic.php页面......

<html>
<head>

</head>
<body>

<?php
$q = intval($_GET['q']);

$con = mysqli_connect('localhost','root','root');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"tunes");
$sql="SELECT * FROM testMusic WHERE volumeTest = '".$q."'";
$result = mysqli_query($con,$sql);

while($row = mysqli_fetch_array($result)) {
echo "<p>" . $row['title'] . "</p>";
}

mysqli_close($con);
?>
</body>
</html>

我曾尝试删除select输入上的onchange函数并添加一个带有'onclick.volume.value'属性的提交输入，但实际上并没有比这更远。

Answer 1

对于一个非常简单的例子（但实际上，不是正确的方法）：

第1步

将您的活动移至表单的onsubmit。这使得它在提交表单时调用函数，而不是onchange的{{1}}。您还希望使用<select>绑定它，以便我们可以向函数添加返回值并引用表单。最后，我们需要一个提交按钮，所以我们也会添加它。

return showSong(this)

接下来，我们将稍微改变一下这个功能。这里我们在表单元素（而不是select元素）中接受，并且还指示它<form onsubmit="return showSong(this);"> <Select name="volume"></select> <input type="submit" value="Submit" /> </form>，因此表单不会以正常方式提交。

return false

现在我们已经将它绑定到表单提交时运行。如果您想在此时进行测试，请将function showSong(form){ // TODO return false; }替换为// TODO并提交表单。

第2步

检索表单的值，然后调用我们的AJAX方法。因为我们传入了对表单的引用，所以我们可以访问alert('Hello, world!');来获取该选择列表，然后获取它的值。

form.elements['volume']

现在我们有一个回调分配给表单提交，它根据select的值检索音乐。

使用onclick函数运行AJAX

1 个答案:

第1步

第2步