Php 使用选择框更新显示查询

Php 使用选择框更新显示查询,php,jquery,html,mysql,Php,Jquery,Html,Mysql,我正在学习Ajax,并尝试更新mysql select查询以过滤结果。我认为查询工作正常,但不确定事件是否正常工作 这里是我的HTML与选择 <div class="volunteers"> <h1>Volunteers</h1> <div class="volunteerSelection"> <select id="vtSelect" na

我正在学习Ajax,并尝试更新mysql select查询以过滤结果。我认为查询工作正常,但不确定事件是否正常工作

这里是我的HTML与选择

          <div class="volunteers">
            <h1>Volunteers</h1>
            <div class="volunteerSelection">
                <select id="vtSelect" name="volunteerS">
                    <option value="1">Comittee</option>
                    <option value="2">Day of Event</option>
                </select>
            </div>
            <div id="volunteers">
            </div>
        </div>
这是带有select查询的PHP;我已经更新了这个,正在获取数据。我更新了select标记中的名称,但在查询中没有获取select标记值。当我注释掉post数据并只填写一个值时,它就可以发布了。我没有收到任何错误,它只是显示0个结果

        <?php
        include('readerConnect.php');
        $sql = "SELECT * FROM contacts prc
        JOIN states as st
        ON (prc.stateId = st.idStates)
        INNER JOIN volunteers as v 
        ON (prc.idContacts = v.contactId)
        INNER JOIN volunteerType as vt 
        ON (v.volunteerTypeId = vt.idVolunteerType)
        WHERE (volunteerTypeId = 1 /*`mysql_real_escape_string('$_POST[volunteerS]')`*/)";

        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            // output data of each row
            while($row = $result->fetch_assoc()) {
                echo  
                "<div class='contacts'>
                <div class='contactName'>" . $row["firstName"] ." " . $row["lastName"] ."</div>"
                ."<div class='contactAddress'>" .$row["address1"] ." " .$row["address2"] ."<br>"
                .$row["city"] ." " .$row["state"] ." " .$row["zip"] ."</div>"
                ."<div class='contactVolunteer'>" .$row["volunteerTypeId"]
                ."</div>";
            }
        } else {
            echo "0 results";
        }
        $conn->close();
        ?>

jQuery代码中有几个明显的问题。如果打开浏览器控制台,您应该会看到错误
onChange不是一个函数,因为没有这样的jQuery方法。您想要
change()
on()

您还创建了一个函数
show志愿者()
,但它从未被调用

尝试:


如果遇到更多问题,请使用浏览器控制台网络选项卡检查ajax请求,并始终使用控制台检查错误

您还没有告诉我们错误是什么。您说您不确定事件是否正常工作,但描述您看到的行为或错误也会有所帮助。它根本没有显示任何数据。我可以将其更改为显示所有数据,但使用选择框不会显示任何数据,也不会显示任何错误。谢谢,这对我来说是一个令人困惑的部分。我之前使用的是显示所有数据的功能,但没有将其取出。我已经用新的代码更新了我的问题以进行一些更正,几乎在那里,我想我在将post变量传递到查询时遇到了问题。您正在发送一个名为
data
的键,但正在查找
$\u post[志愿者]
。他们需要匹配。当您检查请求并查看sentI时,应该在浏览器控制台中看到这一点。我已尝试将其作为
WHERE(自愿类型ID=
mysql\u real\u escape\u字符串(“$\u POST[selectedOptionValue]”)
它仍然不会返回任何其他0结果。请检查请求!您没有发送任何名为
selectedOptionValue
的post密钥。您的浏览器将准确显示发送的键/值对。php中大量的
$\u POST
,您也可以在ConsoleEyes中看到,我知道我已经看过了。它显示我正在发送数据=1或数据=2,具体取决于选择。这是否意味着我发送的不仅仅是1或2,而是附加信息data=?
        <?php
        include('readerConnect.php');
        $sql = "SELECT * FROM contacts prc
        JOIN states as st
        ON (prc.stateId = st.idStates)
        INNER JOIN volunteers as v 
        ON (prc.idContacts = v.contactId)
        INNER JOIN volunteerType as vt 
        ON (v.volunteerTypeId = vt.idVolunteerType)
        WHERE (volunteerTypeId = 1 /*`mysql_real_escape_string('$_POST[volunteerS]')`*/)";

        $result = $conn->query($sql);

        if ($result->num_rows > 0) {
            // output data of each row
            while($row = $result->fetch_assoc()) {
                echo  
                "<div class='contacts'>
                <div class='contactName'>" . $row["firstName"] ." " . $row["lastName"] ."</div>"
                ."<div class='contactAddress'>" .$row["address1"] ." " .$row["address2"] ."<br>"
                .$row["city"] ." " .$row["state"] ." " .$row["zip"] ."</div>"
                ."<div class='contactVolunteer'>" .$row["volunteerTypeId"]
                ."</div>";
            }
        } else {
            echo "0 results";
        }
        $conn->close();
        ?>
$('#vtSelect').change(function (e) {
    e.preventDefault();
    var selectedOption = $(this).find('option:selected');
    $('#vtSelect option').removeAttr('selected');
    $(selectedOption).attr('selected', 'selected');
    var selectedOptionValue = $(selectedOption).val();

    $.ajax({
        type: "POST",
        url: "includes/backDataProcess.php",
        data: {
            data: selectedOptionValue
        },
        success: function (data) {
            $("#volunteers").html(data);
        }
    });

});