Question

我还在学习Jquery，并且对我手上的任务感到困惑。

看起来像一个简单的任务...... 我有一个盒子，我想用点击选项填充。我不希望它在页面加载时填充，只有当有人实际请求查看列表时。它也必须只填充一次。我真的不希望每次有人扩展名单时请求都会出去。

我想我可能在我的Select元素中有一个函数调用

<select id="usersList" name="usersList" onclick="getUsers()">

然后有一个Javascript getUsers（）函数调用我的Json GetUsers（）ActionMethod来获取该列表。怎么样？

像......一样的东西？

function getUsers()
{
 getJSON("/Users/GetUsers", null, function (data){}
}

或JQuery？...

$("usersList").click(
  $.getJSON("/Users/GetUsers", null, function (data) {}
  )

我应该提一下，我看过这篇文章： populate selectlist with json data in JQuery when the selectlist is loaded (not the document)

但是我需要帮助把它们放在一起。提前谢谢！

Answer 1

以下是我用来填充选择框的javascript。

$.getJSON("/Users/GetUsers", null, function(data) {
    $("#UsersList option").remove(); // Remove all <option> child tags.
    $.each(data.Users, function(index, item) { // Iterates through a collection
        $("#UsersList").append( // Append an object to the inside of the select box
            $("<option></option>") // Yes you can do this.
                .text(item.Description)
                .val(item.Id)
        );
    });
});

我建议您在页面加载时触发此操作，而不是在用户单击选择框时触发。 jQuery AJAX默认情况下是异步的（因为它应该是这样）所以有一两个选择框将为空，这可能会极大地混淆用户。

这是你问题的范围还是你需要MVC方面的帮助？如果你正在使用ASP.Net MVC，实际上有一个特定的结果类型JsonResult，这使得创建JSON控制器方法更简单，因为它们不需要相应的视图。它还允许您使用匿名数据结构，这使得特定于方法的投影更简单。

EDIT 以下是返回JSON结构的基本方法，上面的jQuery代码可以理解。请注意，属性u.Username和u.ID取决于您的Users对象。

[HttpPost] 
public JsonResult GetUsers() { 
    return Json(new {
        Users = from u in _usersRepository.Get()
                select new { Description = u.Username, ID = u.ID }
    }); 
}

我建议你尽快放弃这种方法并使用标准的JSON消息结构。我使用的是这样的：

{
    Success: bool,
    LoggedIn: bool,
    ClientErrors: [
        { Number: int, Description: string, Parameter: string },
        { Number: int, Description: string, Parameter: string }...
    ],
    ServerErrors: [
        { Id: int, Message: string },
        { Id: int, Message: string }...
    ],
    Data: {}
}

以下是执行此操作的几个原因：

毫无疑问，您的JSON方法库是一种各种协议，因此它受益于标准标题。
错误处理从中受益最多。有一个让用户知道出错的一致方法是非常宝贵的。
区分客户端错误（错误的用户名，错误的密码等）和服务器错误（数据库脱机）非常重要。一个用户可以修复，另一个用户无法修复。
客户端错误不仅应返回消息，还应返回导致该消息的方法中的参数（如果适用），以便您可以在相应的输入字段旁边轻松显示这些错误消息。
客户端错误还应提供标识错误的唯一编号（每种方法）。这允许多语言支持。
服务器错误应该提供记录的错误的ID。这样，您就可以允许用户联系支持人员并引用他们遇到的特定错误。
登录布尔值允许任何使用需要身份验证的方法的页面在必要时轻松地将用户重定向回登录屏幕，因为JSON方法的重定向操作结果将无效。
最后，数据字段是应提供方法特定数据的位置。

绝不应该将我的结构视为的方式来实现它。显然，您的应用需求可能与我的有很大不同。一致性，比任何特定结构更重要的是这里的教训。

编辑：2016年1月6日 - 看到人们仍然在看这个答案。关于填充下拉列表，我建议使用双向绑定框架。就个人而言，我更喜欢Knockout.JS，虽然Angular.JS也可以完成这项工作。除此之外，这个答案的其余部分仍然是最新的。

编辑：8/10/2016 - 代码缺少逗号。

Answer 2

我会使用jQuery选项。

// You are missing the new anonymous function call
$("#usersList").click(function() {
    // If the select list is empty:
    if ($(this).find("option").size() > 0) {
        // Documentation on getJSON: http://api.jquery.com/jQuery.getJSON/
        $.getJSON("/Users/GetUsers.php", null, function (data) {
            $.each(data.items, function(i,item){
                // Create and append the new options into the select list
                $("#usersList").append("<option value="+item.id+">"+item.yourName+"</option>");
            });
        });
    }
});

由于append()操作相对“昂贵”，您还可以构建一个包含该信息的字符串，并将其仅添加一次：

var collaboration = "";
$.each(data.items, function(i,item){
    collaboration += "<option value="+item.id+">"+item.yourName+"</option>";
});
$("#usersList").append(collaboration);
...

以下是jsfiddle，演示如何确定选择列表是否为空。

填充使用带有Json数据的Javascript / Jquery单击选择框选项

2 个答案: