javascript - jQuery AJAX-填充文本框和下拉框

这是我第一次使用JQuery AJAX，因此我对语法不太熟悉。现在，我正在从数据库中提取一组值并填充一个下拉框。我需要AJAX进行的工作是在下拉列表中进行选择时，用硬编码信息填充其他三个字段。在AJAX正常运行后，我想查询数据库并根据其从下拉列表中的选择返回结果。

<div class="panel-body">
    <div class="form-group">
        <label for="nomName" class="col-sm-3 control-label">Name:</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" data-validation="required" name="nomName" id="nomName" placeholder="Name" maxlength="50">
        </div>
    </div>
    <div class="form-group">
        <label for="nomTitle" class="col-sm-3 control-label">Title:</label>
        <div class="col-sm-8">
            <input type="text" class="form-control" data-validation="required" name="nomTitle" id="nomTitle" placeholder="Title" maxlength="50">
        </div>
    </div>
    <div class="form-group">
        <label for="nomDept" class="col-sm-3 control-label">Department:</label>
        <div class="col-sm-8">
            <select class="form-control" name="nomDept" id="nomDept">
                <option value="" disabled selected>Select a Department...</option>
                <option value="Building Services">Building Services</option>
                <option value="Construction Management">Construction Management</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="nomGUID" class="col-sm-3 control-label">AU Email/GUID:</label>
        <div class="col-sm-8">
            <select class="form-control" name="nomGUID" id="nomGUID">
                <option value="" disabled selected>Select a Person...</option>
                <?php
                while($row = mssql_fetch_array($user_list)){
                    echo "<option value=\"" . $row['id'] . "\">" . $row['id'] . "</option>";
                }
                ?>
            </select>
        </div>
    </div>
</div>

这是我的AJAX。我知道这是不正确的，因此，如果有人提供了解决方案，我将不胜感激。谢谢。

$(function() {
    var options = {
        "Option 1": "value 1",
        "Option 2": "value 2",
        "Option 3": "value 3"
    }
    $('#nomGUID').change(function() {
        $.ajax({
            url: 'test.php',
            success: function('#options') {
                $('#nomDept').empty();
                $('#nomTitle').html('Test AJAX');
            }
        })
    }
}

最佳答案

“成功”用于传递回调处理程序。您可以使用匿名函数或命名函数来实现处理程序。您使用的语法是非法的，并且都不是。

阅读匿名函数：
http://www.w3schools.com/js/js_function_definition.asp

我假设您对test.php的AJAX调用将返回某种JSON响应。例如：

{
    "title": "New Title",
    "foo": "bar",
    "baz": "qux",
    "departments": [
        "Building Services",
        "Construction Management"
    ]
}

您可以使用命名函数来实现成功回调函数。在回调内部，设置选项。

$.ajax({
    url: 'test.php',
    success: myAjaxSuccessHandler
});

function myAjaxSuccessHandler(data) {
    $('#nomDept').empty().append(
        $('#nomTitle').html(data.title);

        $.map(departments, function(element) {
            return $('<option></option>').val(element).text(element);
        })
    );
}

您还可以选择使用匿名函数，如下所示：

$.ajax({
    url: 'test.php',
    success: function(data) {
        $('#nomTitle').html(data.title);

        $('#nomDept').empty().append(
            $.map(departments, function(element) {
                return $('<option></option>').val(element).text(element);
            })
        );
    }
});