如何从 API 填充数据并加载到下拉列表中

How to populate data from API and load into dropdown

本文关键字：加载 下拉列表 数据 API 填充      更新时间：2023-09-26

我正在开发使用 API 的 MVC 应用程序，我想从 API 调用一个方法，以便它将数据加载到组合框中。我不知道如何解决这个问题，因为我是新的。

谢谢。

ClaimController API 中的函数，它得到了这个函数。

[RoutePrefix("api/Claim")]
[Route("GetScheme")]
[HttpGet]
public HttpResponseMessage GetScheme()
{
    try
    {
        using (IBusinessLogic logic = new BusinessLogic.Implementation.BusinessLogic())
        {
            Request.Headers.Clear();
            var tmpresults = logic.GetScheme();
            var results = (from x in tmpresults.Result select new { text = x.Description, value = x.Id }).ToArray();
            var response = Newtonsoft.Json.JsonConvert.SerializeObject(results);
            return Request.CreateResponse(HttpStatusCode.OK, results);
        }
    }
    catch (Exception ex)
    {
        return Request.CreateResponse(HttpStatusCode.BadRequest, ex);
    }
}

来自客户端（即 UI）的视图我想从 API 调用该函数以将数据加载到组合框中

    function GetAllScheme() {
    var select = $("#ddlScheme");
    $.ajax({
        type: "GET",
        url: "http://localhost:55393/_Api/Claim",
        dataType: "json",
        success: function (data) {
            debugger;
            var datavalue = data;
            var serverResponse = datavalue;
            contentType: "application/json";
            $.each(serverResponse, function (i, serverResponse)
            {
                select.append("<option value='" + serverResponse.Description + "'>" + serverResponse.Description + "</option>")
            });
        },
        error: function (xhr) {
            alert(xhr.responseText);
        }
    });
}

下拉列表

<select class="dropdown form-control input-xs required" id="ddlScheme" onclick="GetAllScheme()(this)">
                                                                 <select 
                                                                </select>
                                                            </div>

在获得服务器响应后，您必须将选项元素附加到选择（下拉）元素中。像这样：

    function GetAllScheme() {
        // get the dropwdown by its id
        var select = $("#ddlScheme");
        $.ajax({
            ...
            success: function (data) {
                $.each(myJsonObject, function (i, mobj) {
                    $("#Cartbl").append('<tr><td width="50px">' + mobj.Description + '</td></tr>');
                    // for each element, add an option into the dropdown
                    select.append('<option>"+ mobj.Description +"</option>')
                }
            });
            ...
        )}

参见 jsfiddle https://jsfiddle.net/n4mtj9om/

如果使用

Chrome 在开发人员工具中输入 看看服务器在服务器响应后放置断点的响应方式，因为使用时可能把这个

function GetAllScheme() {
      $.ajax({
        type: "GET",
        url: "http://localhost:32359/api/Claim",
        dataType: "json",
        success: function(data) {
          $.each(data.responseJSON, function(i, mobj) {
            $("#Cartbl").append('<tr><td width="50px">' + mobj.Description +
              '</td></tr>');
          });
        },
        error: function(xhr) {
          alert(xhr.responseText);
        }
      });
    }
相关文章：