现在的位置: 首页 > 综合 > 正文

JS获取后台json数据,生成复选框,并传值到后台

2013年02月26日 ⁄ 综合 ⁄ 共 2843字 ⁄ 字号 评论关闭
获取需要放到复选框的数据:
JSONObject beanlistjo = new JSONObject();//get、set
[code=java]
JSONObject beanlistjo = new JSONObject();//get、set

public String queryThemeListForRecommend() {
  beanList = themeService.queryThemeListForRecommend();//查询专题列表ForRecommend
  JSONArray beanlist = new JSONArray();
  for (ThemeBean themeobj : beanList) {
   JSONObject theme = new JSONObject();
   theme.put("topic", themeobj.getThemeName());

   List<ThemeBean> list = new ArrayList<ThemeBean>();
   list = themeService.queryThemeTagListForRecommend(themeobj
     .getThemeId());
   JSONArray itemList = new JSONArray();
   for (ThemeBean themeItem : list) {
    JSONObject beanItem = new JSONObject();
    beanItem.put("tagId", themeItem.getThemeId());
    beanItem.put("tagName", themeItem.getThemeName());
    beanItem.put("tagStatus", "");
    itemList.add(beanItem);
   }
   theme.put("tag", itemList);
   beanlist.add(theme);
  }
  beanlistjo.put("list", beanlist);
  return "tlfRecommend";
 }

上面这段代码大家可以根据自己的情况重写,写成JSONObject里面包一个JSONObject和一个JSONArray,在这个JSONArray里面是一堆JSONObject,这些JSONObject里面都是一个JSONObject和一个javabean,这个javabean里面是一个JSONObject。
之所以这样写是因为我要把这个json传递到js里面,在js里面解析成我需要的格式,生成复选框。

需要的json格式:

   

"list": [
        {
            "topic": "dsgfdg",
            "tag": [
                {
                    "tagId": 67,
                    "tagName": "1212121",
                    "tagStatus": ""
                }
            ]
        },
        {
            "topic": "蓝色多瑙河",
            "tag": [
                {
                    "tagId": 63,
                    "tagName": "1212",
                    "tagStatus": ""
                },
                {
                    "tagId": 59,
                    "tagName": "111",
                    "tagStatus": ""
                }
            ]
        }
    ]
}

检查json格式的网站:http://jsonlint.com/

jsp页面:
<input type="hidden" name="beanlistjo" id="beanlistjo" value=<s:property value='beanlistjo'/>>
我是用的struts2框架,所以可以这样获取beanlistjo。

将接收到的beanlistjo解析,转换格式即可:我这种方法是将所有数据一次性都从后台取出来,大家要考虑数据量,5000行以下应该没问题。

]<script>
 jQuery(function() {
  var beanlistjo = $("#beanlistjo").val();
  var data = jQuery.parseJSON(beanlistjo);
  $.each(data.list, function(i, li) {
   var str = "";
   $("#topic").append("<option>" + li.topic + "</option>");
   for ( var x = 0; x < li.tag.length; x++) {
    str += "<input type='checkbox' name='checkTheme' value='"
      + li.tag[x].tagId
      + "' "
      + ((li.tag[x].tagStatus == "1") ? "checked='checked'"
        : "") + ">" + li.tag[x].tagName + "<br />";
   }
   $("#tagList").append(
     "<div id='tag_"+li.topic+"' style='display:none'>" + str
       + "</div>");
  });
  $("#topic").live("change", function(){
   $("#tagList>div").hide();
   $("#tagList #tag_" + $(this).val()).show();
  });
 });
</script>

 

html代码:根据id来接收JS得到的复选框。

<select id="topic" name="topic">
<option> --请选择--</option>
</select>
<div id="tagList"></div>

 

用js来获取复选框的值,并传回后台:
<input type="hidden" id="tempString" name="tempString" />
<input type="button" id="btnSubmit" value="保存 " class="button" onclick="aa();"/>

<script language="javascript">
 function aa() {
  var bb = "";
  var temp = "";
  var a = document.getElementsByName("checkTheme");
  for ( var i = 0; i < a.length; i++) {
   if (a[i].checked) {
    temp = a[i].value;
    bb = bb + "," + temp;
   }
  }
  document.getElementById("tempString").value = bb.substring(1, bb.length);
  alert(document.getElementById("tempString").value);
 }
</script>

 

在后台,我是用的struts2框架,所以:
private String tempString;//get、set  注意这个名字和jsp里面那个hidden的input要一样。
在跳转的action里面:
String temp1[] = tempString.split(",");// 截取字符串,获得各个checkBox的值
用数组去获取,剩下的就是遍历数组取值了:
for (int i = 0; i < temp1.length; i++) {...}

抱歉!评论已关闭.