从数据库填充选择列表

本文关键字：列表 选择 填充 数据库 | 更新日期: 2023-09-27 18:31:39

我对使用JSON数据和ajax完全陌生，但我有一个选择列表，我想从Web服务填充。我使用提琴手查看 Web 服务是否正确返回 JSON 数据，并验证了它是否正确。选择列表仅显示默认----Select-----

Web 服务的代码：

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ToolboxItem(false)]
 [ScriptService]
public class WebService1 : System.Web.Services.WebService
{
    private TrackerEntities db = new TrackerEntities();

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string GetCompanies()
    {
        var companies = new List<Company>();
        companies = (from c in db.Ref_Company
                     select new Company { CompanyDesc =  c.CompanyDesc,CompanyCode = c.CompanyCode }).ToList();
        return new JavaScriptSerializer().Serialize(companies);
    }

}
public class Company
{
    public string CompanyCode { get; set; }
    public string CompanyDesc { get; set; }
}

HTML 的代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>   
<script type="text/javascript">
 $(document).ready(function () {
     $.ajax({
         type: "POST",
         contentType: "application/json; charset=utf-8",
         data: "{}",
         url: "WebService1.asmx/GetCompanies",
         dataType: "json",
         success: ajaxSucceess,
         error: ajaxError
     });
     function ajaxSucceess(data) {
        $.each(data, function (index, elem) {
           // Create a new <option>, set its text and value, and append it to the <select>
           $("<option />")
              .text(elem.CompanyCode)
              .val(elem.CompanyDesc)
              .appendTo("#Select1");
        });
     }
     function ajaxError(response) {
         alert(response.status + ' ' + response.statusText);
     }
 });

</script>   
</head>
<body>
<form id="form1" runat="server">

 <select id="Select1"><option>---Select------</option></select>

</form>
</body>
</html>

从数据库填充选择列表

根据上面的评论，我认为问题是您没有正确访问数组。 考虑此 JSON 响应：

{ "d" : "[
  { "CompanyCode" : "HTH", "CompanyDesc" : "Company1" },
  { "CompanyCode" :‌ "SMC", "CompanyDesc" : "Company2" },
  { "CompanyCode" : "CTT", "CompanyDesc" : "‌​Company3" }
]"}

如果这是 JavaScript 代码中成功函数中 data 的值，则无法将data作为数组循环。 因为data不是数组，所以它是一个对象。 该对象在名为 d 的属性中包含数组。 尝试将调用更改为 $.each() 以改用该属性：

$.each(data.d, function (index, elem) {
    //...
});

您甚至可以使用正常的for循环对其进行测试，以确保：

for (var i = 0; i < data.d.length; i++) {
    // do something with data.d[i]
}
相关文章：