JQuery и JavaScript AJAX базы данных запросов

Question

Кажется, мне не повезло с этими чертовыми AJAX-запросами MySQL ...

Я пытаюсь выполнить запрос к базе данных, когда сделан выбор из выпадающего меню, и заполнить div с помощьюРезультаты из сценария.Я пробовал два разных способа, но безуспешно.

МЕТОД 1

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

хорошо для начала, во втором методе все ваши опции выбора имеют одинаковые идентификаторы.следовательно, при запросе:

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

вы всегда получите первую опцию.

Вместо этого, в функции change, this будет ссылаться на выбранный элемент.Итак:

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

получит то, что вы хотите

РЕДАКТИРОВАТЬ

Вот упрощенный пример использования вашего кода, демонстрирующий желаемое поведение в форме jsfiddle: http://jsfiddle.net/7Xtqv/1/

надеюсь, что поможет

Answer 2

В вашем запросе jQuery AJAX вы устанавливаете dataType в JSON. Таким образом, jQuery пытается проанализировать JSON после получения. Если это не удается, ничего не происходит. Даже запрос, показанный в Firebug.

Если вы используете html в возврате AJAX, вам следует установить для dataType значение HTML.

EDIT

Да, и во втором запросе в вашем файле jQuery вы делаете var class = $("#class").val();. Возможно, вы захотите избежать именования ваших переменных зарезервированными именами: http://www.quackit.com/javascript/javascript_reserved_words.cfm

EDIT2

Как заметил @pthurlow, произошла большая ошибка с именами ваших идентификаторов. Вы пытаетесь выбрать #race, но в вашем HTML нет идентификатора race. Там есть #race_select, но он отличается от #race. Это также терпит неудачу с вашим #class материалом.