Question

我正在学习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>

这是显示数据的脚本;

我已将此更新为建议，并且工作正常。然后我开始研究我的PHP和mysql查询。见下文;

        $(document).ready(function(){
            $('#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);
                    }
                });
            });
        });

这是带有select查询的PHP;我已经更新了这个并且正在获取数据。我更新了select标记中的名称，但是我没有在查询中获得select标记值。当我注释掉帖子数据并只填写一个值时，它就会发布。我没有收到任何错误，它只显示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();
        ?>

我不确定问题究竟在哪里，我已尝试更改和onchange更新，我是否需要更新按钮？我认为jquery能够在没有更新的情况下做到这一点。非常感谢任何帮助。

Answer 1

您的jQuery代码中存在几个明显的问题。如果您打开浏览器控制台，则应该看到错误onChange is not a function，因为没有这样的jQuery方法。您想要change()或on()

你也创建了一个函数showVolunteers()，但它永远不会被调用。

尝试：

$('#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);
        }
    });

});

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

使用选择框更新显示查询

1 个答案: