js--2.字符串拼接

1      原则

         在html的页面，传递数据都是以字符串的形式

Js时间传递参数注意

单引号转义：

 

双引号：

最大原则：页面不要有空格

2      For循环的

2.1  多选按钮

2.1.1  返回html拼接

 

success: function (data) {
   var content ='';
   for(var i=0;i<data.data.length;i++) {
      content += '<input type="checkbox" name="perId" value="'+ data.data[i].id+ '"/>'+data.data[i].permissionName;
      content += '<br />'
      if((i + 1)%3 == 0) {
         content += '<br />'
      }
   }
   $("#role").html(content);
},

 

2.1.2  Js获得

 

var perId = '';
$("input:checkbox[name='perId']:checked").each(function() {
   perId += $(this).val() + ",";
});
perId = perId.substring(0 , perId.length -1);
 

2.1.3  Controller

这里是把string数组转化成为long数组

 

String[] ss = perId.split(",");
Long [] longs = new Long[ss.length];
for(int i=0;i<ss.length;i++) {
    longs[i] = Long.parseLong(ss[i]);
}

或者直接遍历，需要的时候对单个强制

 

 

 

2.2  超链接

2.2.1  返回html拼接

success: function (data) {
            var content1 = "";
            for(var i = 0;i < data.data.length;i++) {
               content1 += '<a href="<%=path %>/controller/account/viewUser.do?role= ' +data.data[i].id + '">'  +
                     data.data[i].roleName +'</a>      ';
//             console.log(content1);
            }
            $("#content").html(content1);

         },

2.3  单选按钮

2.3.1  返回html拼接

 

success : function(data) {
    var a ='';
    for(var i=0;i<data.length;i++){
        a += '<input type="radio" name="bankName" value="'+ data[i]['fbId']  +'" /> '+data[i]['bankName'] +"("+
                data[i]['bankNumber']+"）  <br /><br />";
    }
    $('#tixian').html(a);
}

 

2.3.2  js获得

  

var bankName=$('#tixianinput:radio[name="bankName"]:checked ').val();

 

 

2.4  下拉框

2.4.1  返回html拼接

 

success: function (data) {
   var op = '';
   for(var i = 0 ; i < data.length ; i++ ){
      op += '<option value="'+ data[i].id +'">';
      op +=data[i].provinceCity;
      op += '</option>';
   }
   $("#province").html(op);
}, 

2.4.2  js获得值+文本

 

 

 

 

 

 

3      扩展：省市联动—下拉框

3.1  省获得—预加载

 

var provice='${user.province}';
   //获得省
   $.ajax({
      url: "<%=path %>/controller/provinceCity/getAllProvince.do",
      type: "POST",
      dataType: "JSON",                       //返回类型
      success: function (data) {
         var op = '<option value="-1" selected>全部</option>';
         for(var i = 0 ; i < data.length ; i++ ){
            op += '<option value="'+ data[i].id +'" ';
            if(data[i].provinceCity == provice) {
               op += ' selected ';
            }
            op += ' >';
            op += data[i].provinceCity;
            op += '</option>';
         }
         $("#province").html(op);

         //如果省有默认选中值，则触发市
         var exProvince = $("#province option:selected").val();
         if(exProvince != null && exProvince != '' || exProvince != "-1" ) {
            getCityByProvince();
         }
      },
      error: function(data) {
         alert("error:"+data.responseText);
      }
   });
});

3.2  Controller

 

3.3  省触发市

 

//根据省获得相应的市
function getCityByProvince() {
   var city = '${user.city}';
   var provinceId = $("#province option:selected").val();
   $.ajax({
      url: "<%=path %>/controller/provinceCity/getCityByProvince.do",
      type: "POST",
      data:{
         provinceId:provinceId
      },
      dataType: "JSON",                       //返回类型
      success: function (data) {
         var op = '<option value="-1" selected>全部</option>';
         for(var i = 0 ; i < data.length ; i++ ){
            op += '<option value="'+ data[i].cityId +'"';
            if(data[i].city == city) {
               op += ' selected ';
            }
            op += ' >';
            op += data[i].city;
            op += '</option>';
         }
         $("#city").html(op);
      },
      error: function(data) {
         alert("error:"+data.responseText);
      }
   });
}

3.4  Controller