从 servlet 响应生成动态复选框值

Question

我在 servlet 响应中有来自数据库的值作为 id 和 name；我将它存储在 servlet 中的 Map key-value 中。

我现在想创建一个JSP 代码，它生成一个复选框并显示动态值列表。

Servlet 代码

String sql = "SELECT customerid , c_name from customer";
ResultSet rs = s.executeQuery(sql);
Map<String, String> options = new LinkedHashMap<String, String>();

while (rs.next()) {
options.put(rs.getString("customerid"), rs.getString("c_name");
}

String json = new Gson().toJson(options);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);

JSP 代码--

$(document).ready(function () {                           
    $('.btn-checkbox').click(function () {      
    $.get('dataservlet', function (responseJson) {
    var $input = $('#id1');
    var $type = 'checkbox';
        $.each(responseJson, function (key, value) {              
        $('$type').val(key).text(value).appendTo($input); 
    });
    });
});

//JQuery is not generating the right checkboxes, even when the response is in, need help in forming the correct JQuery.

HTML 代码--

div id="id1"></div>

例子-

我有一个记录即将到来-

customerid c_name
5000       name1

我需要一个复选框来生成：

<input type ="checkbox" id'5000"/>name1 

// 所以这里key 是id 而value 是name1

我需要一个复选框，其中包含如下图所示的值-

更新

Answer 1

你完全错了。使用以下几行。 Demo Fiddle

var append = $('<input type="'+$type+'">'+value+'</input>').attr('id',key).val(value);

$($input).append('<br/>').append(append);

• $type 不能用作字符串 - $('$type')
• key 是您的 ID - 所以您不能使用 .val() 来使用它。
• 为什么要将它附加到输入中，您应该在输入后插入新的复选框 - .after()。
• 你忘了用});结束$(document).ready()。
• 在输入时使用 .change() 而不是 .click()。

所以你的最终 JS ：

$(document).ready(function () {                           
    $('.btn-checkbox').change(function () {      
        $.get('dataservlet', function (responseJson) {
            var $input = $('#id1');
            var $type = 'checkbox';
            $.each(responseJson, function (key, value) {              
               var append = $('<input type="'+$type+'">'+value+'</input>').attr('id',key).val(value);
               $($input).append('<br/>').append(append); 
            });
        });
    });
});