从 jQuery Mobile 页面管理 AJAX JSON Web API 调用答案

【问题标题】：Managing AJAX JSON WebAPI Calls from jQueryMobile page从 jQuery Mobile 页面管理 AJAX JSON Web API 调用
【发布时间】：2014-01-23 20:29:10
【问题描述】：

考虑一下：我的 jQueryMobile 页面大约有 5 个下拉菜单。我们决定使用 WebAPI（这里是新手）进行 DB 连接，并编写了 5 个各自的控制器。现在我的基本查询，有没有办法最小化这些 Ajax 调用来填充这些下拉列表中的每一个。

现在我重复以下代码 5 次：

$.getJSON('http://<localhost>:63330/api/data/').done(function (data) {

    var listItems = "";
    for (var i = 0; i < data.length; i++) {
        alert(data[i]);
        listItems += "<option value='" + i + "'>" + data[i] + "</option>";
    }
    $("#ddlDCName").html(listItems);
    })
    .error(function (XMLHttpRequest, textStatus, errorThrown) {
        alert("error: " + XMLHttpRequest.responseText);
    });

【问题讨论】：

标签： ajax json jquery asp.net-web-api

【解决方案1】：

简单的把它变成一个函数

var getJSONForDropdown = function(url,elementId){
    $.getJSON(url).done(function (data) {
                var listItems = "";
                for (var i = 0; i < data.length; i++) {
                    alert(data[i]);
                    listItems += "<option value='" + i + "'>" + data[i] + "</option>";
                }
                $(elementId).html(listItems);
            })
           .error(function (XMLHttpRequest, textStatus, errorThrown) {
                  alert("error: " + XMLHttpRequest.responseText);
            });
}

然后使用您选择的不同 url 和 elementId 调用它。

getJSONForDropdown('http://<localhost>:63330/api/data/',"#ddlDCName");

希望这会有所帮助。

【讨论】：

【解决方案2】：

因为您希望填充所有下拉菜单。最好在一个 ajax 调用中执行此操作。多个 ajax 调用会大大减慢速度。

不是调用不同的控制器，而是让一个控制器一次向您发送所有数据？一旦您通过了数据过滤器并将其附加到相应的下拉列表中。

【讨论】：