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

Question

这是我第一次使用 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');
            }
        })
    }
}

Answer 1

“success”用于传入回调处理程序。您可以使用匿名函数或命名函数来实现处理程序。您使用的语法是非法的，而且两者都不是。

阅读匿名函数: 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);
            })
        );
    }
});