Question

我有一个用MVC构建的项目。在我的一个页面上，一个人可以从下拉列表中选择一项服务。目前有3个下拉列表，每个都依赖于前一个。示例选择：State然后是City，最后是Service。我可以填写州和城市，但服务下拉列表仍然是空的。到目前为止，我已进入浏览器控制台，看到正在从服务器发回正确的信息。我认为问题出在View中，很可能是Form，但我无法看到问题

查看：AJAX通话

        function GetAvailableServiceAreas() {
        $.ajax({
            type: "GET",
            url: "/Service/GetAvailableServiceAreas",
            data: { stateId: $('#StateId').val() },
            datatype: 'JSONP',
            async: true
        })
        .done(function (serviceAreas) {
            $('#ServiceAreaId').empty();

            $.each(serviceAreas, function (i, serviceArea) {
                $("#ServiceAreaId").append(
                    $('<option/>')
                    .attr('value', this.ServiceAreaId)
                    .text(this.Name)
                );
            });

            GetServices();
        });
    }

    function GetServices() {
        $.ajax({
            type: "GET",
            url: "/Service/GetServices",
            data: { serviceAreaId: $('#ServiceAreaId').val() },
            dataType: "JSONP",
            async: true
        })
        .done(function (services) {
            $('#ServiceId').empty(); 

            $.each(services, function (i, service) { 
                $("#ServiceId").append(
                    $('<option/>')
                    .attr('value', this.ServiceId)
                    .text(this.Name)
                );
            });

            GetServiceDescription();
        });
    }

查看表单：

@using (Html.BeginForm("RequestService", "Service", FormMethod.Post))
{
<div class="two-third" style="margin-right: 0;">
    <div id="requestService" style="overflow: auto">
        <h2>Request a Service</h2>
        @Html.ValidationSummary(true)

        <div class="display-label">Select a State</div>
        <div class="editor-field">
            <select id="StateId" name="StateId">
                <option value="0">loading states...</option>
            </select>
        </div>

        <div class="display-label">Select a Service Area</div>
        <div class="editor-field">
            <select id="ServiceAreaId" name="ServiceAreaId">
                <option value="0">loading service areas...</option>
            </select>
        </div>

        <div class="display-label">Select a Service</div>
        <div class="editor-field">
            <select id="ServiceId" name="ServiceId">
                <option value="0">loading services...</option>
            </select>
        </div>

        <div class="selectedService" style="display: none;">
            <div class="display-label">Service Description</div>
            <div class="editor-field" id="ServiceDescription"></div>
            <div class="serviceOptions" id="ServiceOptions"></div>
            <div style="text-align: right;">
                <input type="submit" id="SubmitRequest" value="Select a Contractor" />
            </div>
        </div>
    </div>
</div>

<input type="hidden" class="stateId" name="StateId" value="0" />
<input type="hidden" class="serviceAreaId" name="ServiceAreaId" value="0" />
<input type="hidden" class="serviceId" name="ServiceId" value="0" />
<input type="hidden" class="basePrice" name="BasePrice" value="0" />
}

Answer 1

在您的ajax调用中，指定dataType:"jsonp"。在尝试从其他域访问数据时，这通常是一种解决方法，因为默认情况下，由于跨域策略而无法执行此操作。

当您指定dataType:"json"时，您的服务器应该在回调方法中包装响应（也将由调用方发送）。在您的情况下，您将使用ServiceId和Name属性发回一个项目的集合/数组。您没有处理JSONP调用的响应。

如果您的服务器端代码位于同一个域中，只需从您的ajax调用参数中删除dataType:"json"，它就可以正常工作。

AJAX调用不填充DropDownList

1 个答案: