【问题标题】:Display dynamic mysql table from radio button input using json使用json从单选按钮输入显示动态mysql表
【发布时间】:2013-09-08 01:34:40
【问题描述】:

我有一个带有单选按钮的表单,当单击它时,我将它传递给一个 servlet,该 servlet 从 mysql 表中获取数据并将其显示在同一个页面中并带有复选框。

<input type="radio" name="id" value="1">
<input type="radio" name="id" value="2">
<script>
                $(document).ready(function(){
                    $('input[name=id]').change(function (){
                        var var_name = $(this).val();
                        console.log(var_name);
                        $.getJSON("ServletCode", "id="+var_name,function(data){                            
                            var myValues = data.toHtml;            
                          $("#guts").html(myValues);

                        });
                    });
                });        

            </script>  

我的servlet代码是:

JSONObject jsonObj = new JSONObject();
List<String> myList = new ArrayList<String>();
username = rs.getString("name");
id = rs.getString("userid");
myList.add(username); 
myList.add(userid);                
jsonObj.put("toHtml", myList.toArray());
response.setContentType("application/json");
response.getWriter().write(jsonObj.toString());

我想使用这些值“id”和“name”以及一个复选框来创建一个表。单击复选框时,我需要再次显示从 mysql 获取的“标记”。

【问题讨论】:

    标签: java jquery html json servlets


    【解决方案1】:

    如果我理解正确,您的 JSON 将是

    {"toHtml":["someNameValue", "someUserId"]}
    

    但是,如果您要拥有多个用户名-ID 对,那么它们可能需要它们自己的 JSON 对象。迭代它们会更容易

    你要做的是使用 javascript 创建一个表

    var table = "<table>";
    table += "<thead><tr><th>username</th><th>id</th></tr></thead>";
    table += "<tbody>";
    // loop through the array elements and create rows
    table += "</tr><td>" + /* get the username from the json */ + "</td>";
    table += "<td>" + /* get the userid from the json */ + "</td>";
    // add a javascript callback to a checkbox to display the grades in a similar way
    // done loop
    table += "</tbody>";
    

    然后您可以将此表附加到其他一些 html 元素并使其可见。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2022-01-10
      • 1970-01-01
      • 2016-09-17
      • 2021-11-25
      • 1970-01-01
      • 2020-03-19
      相关资源
      最近更新 更多