Ajax 调用通过单个请求绑定多个 HTML 控件答案

【问题标题】：Ajax call binding multiple HTML controls with a single requestAjax 调用通过单个请求绑定多个 HTML 控件
【发布时间】：2018-10-08 06:06:58
【问题描述】：

我正在尝试使用 Ajax 调用绑定多个 HTML 选择控件，但经过我的努力，我的过程失败了。这里有什么问题？

这是返回五个数据表的网络服务：

[WebMethod]
public List<List<ListItem>> DealerLoad(string otype, string target, string para)
{
    ds = AL.ExecuteDataSet("sp_dlr_NewDealer_query", CommandType.StoredProcedure, new[]
    {
        new MySqlParameter("OType", otype),
        new MySqlParameter("Target", target),
        new MySqlParameter("id", 0)
    });
    List<ListItem> list1 = new List<ListItem>();
    List<ListItem> list2 = new List<ListItem>();
    List<ListItem> list3 = new List<ListItem>();
    List<ListItem> list4 = new List<ListItem>();
    List<ListItem> list5 = new List<ListItem>();

    List<ListItem> list = new List<ListItem>();
    for (int i = 0; i < ds.Tables.Count; i++) {
        foreach (DataRow dr in ds.Tables[i].Rows)
        {

            list.Add(new ListItem
            {
                Value = dr[0].ToString(),
                Text = dr[1].ToString()
            });

            if (i == 0)
            {
                list1 = list;
            }
            else if (i == 1)
            {
                list2 = list;
            }
            else if (i == 2)
            {
                list3 = list;
            }
            else if (i == 3)
            {
                list4 = list;
            }
            else if (i == 4)
            {
                list5 = list;
            }
        }
    }
    return new List<List<ListItem>>{list1, list2, list3, list4, list5};
}

这是 jQuery Ajax 调用：

var url = '../WebDeal.asmx/DealerLoad2';
var data = {};
var control = $('#ddl_country').attr('id') + ',' +
                  $('#ddl_countryallow').attr('id') + ',' +
                  $('#ddl_center').attr('id') + ',' +
                  $('#ddl_Superior').attr('id') + ',' +
                  $('#ddl_SuperExe').attr('id');
data.otype = 'select';
data.target = 'GetLoadData';
data.para = '';
BindControl(url, JSON.stringify(data), control);

绑定控制方法

函数 BindControl(xurl, xdata, xcontrol) {

$.ajax({
    type: "POST",
    data: xdata,
    url: xurl,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {
        onSuccess1(result, xcontrol);
    },
    error: function (error) {
        alert(error.responseText);
    }
});

};

并且调用成功

function onSuccess1(responese, control) {

    var chk = control;
    var controlarr = String(chk).split(',');
    if (controlarr.length == 1) {
        control.empty().append('<option value=0 selected="selected">Select</option>');
        if (responese.d != null) {
            $.each(responese.d, function () {
                control.append($("<option></option>").val(this['Value']).html(this['Text']));
            });
        }
        hideload();
    }
    else {
        $.each(controlarr, function (index, values) {
            var controls = $('#' + values);

            controls.append('<option value=0 selected="selected">Select</option>');
            $.each(responese.d[index], function () {
                controls.append($("<option></option>").val(this['Value']).html(this['Text']));
                hideload();
            });
        });
    }
};

【问题讨论】：

日志说什么？
它什么也没说......只有 Success 方法在这一点上抛出错误 (responese.each(index)
控制台说什么？
什么错误？在哪里？
$.each(responese.each(index), function () {** has error of invalid method each(index) .....我也试过**$。每个(responese.d[index], function () {

标签： jquery asp.net ajax web-services

【解决方案1】：

[WebMethod]
public List<List<ListItem>> DealerLoad(string otype, string target, string para)
{
    ds = AL.ExecuteDataSet("sp_dlr_NewDealer_query", CommandType.StoredProcedure, new[]
    {
        new MySqlParameter("OType", otype),
        new MySqlParameter("Target", target),
        new MySqlParameter("id", 0)
    });
    List<ListItem> list1 = new List<ListItem>();
    List<ListItem> list2 = new List<ListItem>();
    List<ListItem> list3 = new List<ListItem>();
    List<ListItem> list4 = new List<ListItem>();
    List<ListItem> list5 = new List<ListItem>();

    List<ListItem> list = new List<ListItem>();
    for (int i = 0; i < ds.Tables.Count; i++) {
        foreach (DataRow dr in ds.Tables[i].Rows)
        {

            list.Add(new ListItem
            {
                Value = dr[0].ToString(),
                Text = dr[1].ToString()
            });

            if (i == 0)
            {
                list1 = list;
            }
            else if (i == 1)
            {
                list2 = list;
            }
            else if (i == 2)
            {
                list3 = list;
            }
            else if (i == 3)
            {
                list4 = list;
            }
            else if (i == 4)
            {
                list5 = list;
            }
        }
    }



    // *Please try to bind the dropdown here rather than clientside*

    return new List<List<ListItem>>{list1, list2, list3, list4, list5};
}

【讨论】：