javascript - 如何从Web API服务获取数据 - 无法通过knockout JS加载带有api响应的下拉列表

Question

我正在开发一个Web API应用程序，它有一个下拉列表，应该使用knockout JS填充XML中的API响应。我正在尝试使用以下内容

$.ajax({
        dataType: "json",
        url: '/api/UserProfiles',
         data: JSON.stringify(self.brokerNames),
        async: false,
        success: function (data) {
            self.brokerNames((ko.utils.arrayMap(data.value, function (broker) {
                var obsBrokers = {
                    UserId: broker.UserId,
                    UserName: broker.UserName
                }

                return obsBrokers;
            })));
        }
    });

我尝试将以上响应绑定(bind)到下拉菜单，如下所示

<td>
  <select id="cbxBCP" data-bind="options: brokerNames, 
      optionsText: 'UserName', optionsValue: 'UserName', 
      value: selectedBidBroker, optionsCaption: 'Bid Broker'">
  </select>
</td>

但是，上面返回了一个空的下拉菜单。我不确定问题是什么，但我在使用 Postman 调试时看到了 XML 响应。

Web API 是这样的

[HttpGet]
[Authorize(Roles="Admin")]
public IEnumerable<UserProfile> Get()
{
    return db.UserProfiles.OrderBy(c => c.UserName);
}

并且似乎工作正常。

我可以知道如何解决这个问题吗？

Answer 1

Web API 默认返回 XML 格式，或 Accept header 中指定的格式。

在调用 $.ajax 时，您没有指定格式，因此您得到的是 XML。要获取 JSON，您需要提供这两个 $.ajax options 之一:

• 接受，使用accepts='application/json'
• 数据类型，使用dataType='json'

如果您阅读文档，您会发现第二个选项会解析接收到的 JSON，以便您的数据参数直接是 JavaScript 对象。

注意:您无需在 Web API 中注册 JSON 格式化程序，因为它默认可用

注 2:为了正确调试 Web API，您需要使用类似 Postman 的工具。 chrome 扩展，它允许您指定 header (上面解释的 Accepts header )，并使用任何动词 GET、POST、PUT、DELETE 轻松发送和接收 JSON 数据...如果您只需在浏览器中输入 URL，您只会得到默认格式(XML)，并且只能测试 GET 操作，这确实没有帮助