bootStrap:动态循环i添加"input type='checkbox'"通过ajax

bootStrap:动态列表添加通过ajax

• JSP前端（第一种方法）

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css"type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js">script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js">script>
<script type="text/javascript">
$(
function() {
    //加载数据
    $.ajax({
        url : "settings/dictionary/type/queryAllType.do",
        type : "get",
        dataType : "json",
        success : function(data) {
            //alert(data.length);
            var num = 1;
            for (var i = 0; i < data.length; i++) {
                    $("#tBody").append(" "+(num++)
                                    +""+data[i].code
                                    +""+data[i].name
                                    +""+data[i].description+"");                         
            }
        }
    })
    })
script>

- 效果图片1

---

---

• **JSP前端（第二种方法）

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js">script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js">script>
<script type="text/javascript">
    $(function(){
        $.ajax({
            url:"settings/dictionary/value/queryAllValue.do",
            dataType:"json",
            type:"get",
            success:function(data){         
                $.each(data,function(i,v){ //i为循环数字，v为循环值          
                    var html=""+(++i)
                    +""+v.value+""+v.text
                    +""+v.orderNo+""+v.typeCode+"";
                    $("#tBody").append(html);
                })
            }
        })
    })
script>

- 效果图片2