我正在编写一个小页面,其中将包含几个来自SQL的数据表。我需要有一个下拉HTML框,该框将向侦听的AJAX脚本发送一个值,然后将其发送给PHP函数(以从SQL检索适当的表)。
我相信我已经正确设置了所有内容,但是当我从下拉框中选择一个选项时,没有任何反应。我在这里想念什么?感谢您提出的所有建议!
menu.html
<!DOCTYPE html>
<html lan="en">
<meta charset="UTF-8">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#Menu').change(function(){
//Selected value
var tableoptions = $(this).val();
//Ajax for calling php function
$.post('sqlQuery.php', { tableselected: tableoptions }, function(data){
});
});
});
</script>
</head>
<body>
<select id="Menu">
<option value='' disabled selected>Select Device</option>
<option value='capacitors'>Capacitors</option>
<option value='inductors'>Inductors</option>
<option value='resistors'>Resistors</option>
<option value='miscellaneous'>Miscellaneous</option>
</select>
</body>
sqlQuery.php
<?php
function processUserInp($table) {
//This is where $table is passed as the table name
//for the SQL query
}
if ($_POST['tableselected']){
//call the function!
processUserInp($_POST['tableselected']);
}
?>
答案 0 :(得分:2)
首先,正如在评论中发现的那样,您输入了错误的PHP脚本文件名。确保它与实际文件名相同。
第二,一旦当前代码从后端PHP脚本接收到数据,它就什么也不做。查看代码的这一部分:
$.post('sqlQuery.php', { tableselected: tableoptions }, function(data){
});
这应该包含您从服务器取回一些数据后想要执行的逻辑。例如:
$.post('sqlQuery.php', { tableselected: tableoptions }, function(data){
console.log(data); // or print data somewhere on the DOM
});
您的前端代码运行正常(我检查了一下),假设您的后端代码也运行正常(您没有共享整个代码,因此无法对其进行测试),那么您要做的就是处理响应您会从后端的PHP脚本中获得回报。
更新:要回复您的评论,您可以执行以下操作:
首先,在HTML代码中添加一个空白元素,如下所示:
<div id="output"></div>
,然后更新您的jQuery方法,以将返回的HTML插入此div中,而不是使用console.log在控制台上简单地将其记录下来。这是它的样子:
$.post('sqlQuery.php', { tableselected: tableoptions }, function(data){
$("#output").html(data); // or print data somewhere on the DOM
});
答案 1 :(得分:0)
menu.html
<?php
echo "here are details of device $_GET[device]...";
?>
sqlQuery.php
favourite_provider = forms.ModelChoiceField(queryset=Provider.objects.all(), widget=forms.Select(attrs={'class': 'form-control'}))
select标记上的事件onchange ...发出请求...在url中发送设备的ID(sqlQuery.php?device = 3(示例))
sqlQuery.php页面应在数据库中搜索有关设备的数据...
当sqlQuery.php将数据发送回menu.html ... ajax在div devicedetails中显示详细信息