最近动态的编写界面的时候总是需要不定时的用到js,而字符串的拼接还有在jsp文件获取后台的数据变量是个使用的麻烦,我把我碰到的列举一下,希望对以后看到这个问题的人有所帮助
1. JS获取java后台在jsp中的变量
<%
String columnName=(String)request.getAttribute("columnName");
String datas=(String)request.getAttribute("data");
String dataBase=(String)request.getAttribute("dataBase");
String table=(String)request.getAttribute("table");
%>
在jsp中的html中获取java的变量用<%=columnName %>,例如在写表单的时候的action中传递参数用到后台传来的数据(传递两个参数dataBase,table,参数之间用&隔开)
<form id="form" action="save.do?dataBase=<%=dataBase %>&table=<%=table %>">
但是js获取java中的变量的时候就要多个引号,例如
<script type="text/javascript">
var columnNames = '<%=columnName %>';
</script>
如果js中需要后台传的一个一维数组的话,可以获取数据名,再转换成数组。(上边的columnName是我在java后台用jsonlib处理的一个json字符串,下边有补充怎么转换)
var columnNames = '<%=columnName %>';
var names=eval(columnNames);
for(var i=0;i<names.length;i++){ //do something};
如果js中需要二维数组的话,首先需要在后台把二维数组进行一个加工,之后用Jsonlib处理成字符串之后传到界面,之后js获取字符串,在js中像上边传一维数组那样进行两层的解析。
<script type="text/javascript">
var datas='<%=datas %>';//二维数组json串
var lines=eval(data);//二维数组,每个元素是一个一维数组json串
var idata='';
for(i=0;i<lines.length;i++){
var line=eval(lines[i]);//一维数组,包含数据
idata+='<tr id="'+i+'">';//注意1
for(var j=0;j<line.length;j++){
idata+='<td><input id="td'+i+''+j+'" value='+line[j]+'></td>'; //注意2,
//这个拼接i和j是为了后边我可以动态的获取所有的有i,j标记的input标签用的,来获取input中的值
}
idata+='</tr>';
}
$('#ibody').append(idata);
</script>
//前台的代码
<form id="form" style="margin-left: 10px">
<table id="table" border="1px solid #fff" cellspacing="0px">
<thead id="ihead" bgcolor="#F0F0F0"></thead>
<tbody id="ibody"></tbody>//插入动态数据的地方
</table>
</form>
解释下上边的需求,datas是一个后台传过来的二维数组组成的json串,初次解析成lines数组,降维,之后再把lines中的每个元素解析,lines的每个元素都是一个一维数组的json串,之后把数据拼接成一个表单中的标签<tr><td><input id="" value=? ></td></tr>
这种形式的一行一行的字符串idata,在把这些插入到一个id为ibody的form标签中。实现动态的生成可编辑的表单。
2. js拼接字符串
一般就是三种形式:
- 普通的拼接
var idata+='</tr>';
- 拼接变量后边的变量可以用单引号括起来,也可以用双引号,但是必须得有引号.
var data='dataBase='+"<%=dataBase %>"
var ihead+='<td><input readonly="true" value='+names[k]+'></td>';
- 拼接id– 这个是最费事的,也是最容易出错的,因为在标签中id的值是用” “括起来的,例如
<div id="what"></div>
当值为静态的还好说,但是当设置动态的id的时候就要小心了,看上边我标记为 (注意1)的代码
idata+='<tr id="'+i+'">';
当所拼接的id为含有多个连续的变量的时候,看(注意2)的代码
idata+='<td><input id="td'+i+''+j+'" value='+line[j]+'></td>';
所以总结一个规律,当拼接id的时候可以把
'+变量+'
当成一个字符串的变量来处理
还有补充一点就是用jQuery动态获取标签的时候也可能用到字符串的拼接
$("#"+i+"").remove()
找到指定的标签删除。
PS:补充上边后台对json串的处理,因为我的需求是即需要传递一维数组,也需要二维数组,所以我的做法就是
- 一维数组的数据都存放在List中,然后在用jsonlib去中的加工list的方法转换成json字符串,例如上边的columnName。
List<String> columnNameArr = newArrayList<String>();
columnNameArr.add("数据");
String columnName=JSONArray.fromObject(columnNameArr).toString();
ServletActionContext.getRequest().setAttribute("columnName", columnName);//利用request传输字符串到前台
- 加工二维数组,
List<List<Object>> datas = new ArrayList<List<Object>>();
while (dataRet.next()) {
List<Object> one = new ArrayList<Object>();
for (String s : columnNameArr) {
one.add(dataRet.getString(s));
}
datas.add(one);
}
String data = JSONArray.fromObject(datas).toString();
加工都一样,就是list中套着很多的list,这是我用的方法,可能还有更简便的,那就见仁见智了。用jsonlib工具类的时候需要导入几个jsonlib对应的jar包,如果没有我上传了一个,在我的资源中。在我上传的资源中有jsonlib的其他应用,例如加工map,加工一个实体类等等。感兴趣的可以看一下。