php - jQuery 和 JavaScript AJAX 数据库查询

Question

我似乎对这些该死的 AJAX MySQL 查询没有运气......

当从下拉菜单中进行选择时，我尝试查询数据库，并用脚本的结果填充 div。我尝试了两种不同的方法，但都没有成功。

方法一

Javascript

var ajaxRequest;
var create_url = "create_script.php";
var process_url = "process.php";
try{
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            alert("Your browser broke!");
        }
    }
}

function races(id)
{
    ajaxRequest.onreadystatechange = function()
    {
        if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
            document.getElementById('race_info').innerHTML = ajaxRequest.responseText;
        }
    }
    var params = "mode=race&id="+id;
    ajaxRequest.open("POST", create_url, true);
    ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajaxRequest.setRequestHeader("Content-length", params.length);
    ajaxRequest.setRequestHeader("Connection", "close");
    ajaxRequest.send(params);
}

function classes(id)
{
    ajaxRequest.onreadystatechange = function()
    {
        if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){
            document.getElementById('class_info').innerHTML = ajaxRequest.responseText;
        }
    }
    var params = "mode=classes&id="+id;
    ajaxRequest.open("POST", create_url, true);
    ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajaxRequest.setRequestHeader("Content-length", params.length);
    ajaxRequest.setRequestHeader("Connection", "close");
    ajaxRequest.send(params);
}

页面正文:

<div id="contentwrapper">
    <div id="contentcolumn">
        <div class="innertube">
            <?php
            if($step == 0)
            {
            ?>
            <form action="<?php echo $u_create; ?>" method="post">
                <h2>Races</h2>
                <select id="race_select" name="race_select">
                    <?php
                    $sql = 'SELECT * FROM '.RACES_TABLE;
                    $result = $db->sql_query($sql);
                    while($row = $db->sql_fetchrow($result))
                    {
                        echo '<option onfocus="races('.$row['race_id'].');" value="'.$row['race_id'].'">'.$row['race_name'].'</option>'."\n";
                    }
                    ?>
                </select>
                <h2>Classes</h2>
                <select id="class_select" name="class_select">
                    <?php
                    $sql = 'SELECT * FROM '.CLASSES_TABLE;
                    $result = $db->sql_query($sql);
                    while($row = $db->sql_fetchrow($result))
                    {
                        echo '<option onfocus="classes('.$row['race_id'].');" value="'.$row['class_id'].'">'.$row['class_name'].'</option>'."\n";
                    }
                    ?>
                </select>
                <br />
                <input type="submit" value="Select" name="submit" />
            </form>
            <br />
            <div id="race_info"></div>
            <br />
            <hr />
            <br />
            <div id="class_info"></div>
            <?php
            }
            ?>
        </div>
    </div>
</div>

方法2

AJAX

$(document).ready(function() {
    $("#race_select").change(function() {
        var race = $("#race").val();
        $.ajax({
            url: 'create_script.php',
            data: 'mode=race&id=' + race,
            dataType: 'json',
            success: function(data)
            {
                $("#race_info").html(data);
            }
        });
    });

    $("#class_select").change(function() {
        var class = $("#class").val();
        $.post("create_script.php", { mode: "class", id: class }, function(data) {
            $("#class_info").html(data);
        });
    });
});

页面正文:

<div id="contentwrapper">
    <div id="contentcolumn">
        <div class="innertube">
            <?php
            if($step == 0)
            {
            ?>
            <form action="<?php echo $u_create; ?>" method="post">
                <h2>Races</h2>
                <select id="race_select" name="race_select">
                    <?php
                    $sql = 'SELECT * FROM '.RACES_TABLE;
                    $result = $db->sql_query($sql);
                    while($row = $db->sql_fetchrow($result))
                    {
                        echo '<option id="race" value="'.$row['race_id'].'">'.$row['race_name'].'</option>'."\n";
                    }
                    ?>
                </select>
                <h2>Classes</h2>
                <select id="class_select" name="class_select">
                    <?php
                    $sql = 'SELECT * FROM '.CLASSES_TABLE;
                    $result = $db->sql_query($sql);
                    while($row = $db->sql_fetchrow($result))
                    {
                        echo '<option id="class" value="'.$row['class_id'].'">'.$row['class_name'].'</option>'."\n";
                    }
                    ?>
                </select>
                <br />
                <input type="submit" value="Select" name="submit" />
            </form>
            <div id="race_info"></div>
            <hr />
            <div id="class_info"></div>
            <?php
            }
            ?>
        </div>
    </div>
</div>

所有尝试都没有成功。我不确定我做错了什么。根据 firebug 的说法，选择选项更改时甚至没有发出 POST 请求。

Answer 1

对于初学者来说，在方法二中，所有选择的选项都具有相同的 id。因此，查询时:

var race = $("#race").val();

您将永远获得第一个选择。

相反，在 change 函数中，this 将引用所选元素。所以:

var race = $(this).val();

会得到你想要的

编辑

这是一个简化的示例，使用您的代码以 jsfiddle 形式演示您所需的行为:http://jsfiddle.net/7Xtqv/1/

希望有帮助