AJAX发送HTML请求到PHP函数

时间:2018-08-01 20:51:08

标签: php html sql ajax

我正在编写一个小页面,其中将包含几个来自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']);
}
?>

2 个答案:

答案 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中显示详细信息