正文
前后台交互经常使用的技术汇总（后台：Java技术，前台：Js或者Jquery）
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1：由于针对特定的前后台交互用到的知识总结，所以不大量贴代码，主要给出思路，方便自己以后脑补和技术总结，当然也希望可以帮助到别人。
后台Json和其他格式转化，之前总结过Json和对象，集合，字符串的转化或者互相转化，这里我想网上有很多demo。
servlet，或者strtus2或者SpringMvc，在控制层将传递到前台的数据进行封装或者转化为Json，对你的开发十分有帮助。
案例一：当前台申请或者取消按钮的时候，前台根据操作显示对应的提示，非弹出框。
（1）：此处使用SpringMvc作为Controller层。
@RequestMapping(value="/applyRights")
protected void applyRights(final HttpServletRequest request, final HttpServletResponse response) throws Exception{ ...操作
...操作
...操作
...操作
Map<String,Object> map = new HashMap<String,Object>();
//这里将前台的两种操作返回的数据分别，保存到map里面。
map.put("返回的数据1", 返回的数据1);
map.put("返回的数据2", 返回的数据2);
//然后使用JsonUtil，这个封装好的Json转化工具类，将map类型转化为Json类型的。Java的map集合类型转化为Json类型。
String json = JOSNUtil.object2String(map);
//将转化后的数据传递给前台的Ajax的function(data){}的data.
response.getWriter().write(json);
//刷新操作
response.getWriter().flush();
（2）：前台使用Jquery进行后台数据处理：Jquery速查网址
function 方法名称(参数){
...操作
...操作
...操作
//$.post的用法自行查阅
$.post(
url:发送请求地址,
data:待发送 Key/value 参数,
function(data){
//alert(data);//可以打印传过来的参数
//解析后台传过来的map转成的json格式的字符，Java的map集合类型转化为Json类型。
//eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
var json = eval("(" + data + ")");
//直接使用json.key的形式进行获取
if(json.返回的数据1!=null){
//js循环遍历返回的值，注我的map的value是数组类型的(Object)。
for(var i=;i< json.返回的数据1.length;i++){
//获取到这个id是为了动态根据某一个角色id来追加内容。
var roleId = json.返回的数据1[i];
//动态根据某一个角色id来追加内容。"#"+roleId代表选择器动态变化。
$("#"+roleId).append('<span style="color:red;">(申请权限待审批)</span>');
//此句话的，查找每个动态id元素的所有类名为 "selected" 的所有同胞元素：
//然后attr() 方法设置或返回被选元素的属性值。
//然后设置一下checkbox为不选中，且disabled不可选。
$("#"+roleId).siblings().attr("checked",false).attr("disabled",true);
}
}
//同上
if(json.返回的数据2!=null){
for(var i=;i< json.返回的数据2.length;i++){
var roleId= json.返回的数据2[i]
$("#"+roleId).append('<span style="color:red;">(申请注销待审批)</span>');
$("#"+roleId).siblings().attr("checked",false).attr("disabled",true);
}
}
});
}
案例二：根据id动态变化传递到后台，ajax异步请求，刷新前台显示内容。
（1）：此处使用SpringMvc作为Controller层。
//根据角色id获取资源信息/index/getResource
//@ResponseBody将返回值转化为json格式响应到客户端
@RequestMapping(value="/getResource",method=RequestMethod.POST)
public @ResponseBody List<Object> roleGetResource(HttpServletRequest request, HttpServletResponse response)
throws Exception{
//设置编码格式
response.setCharacterEncoding("utf-8"); //获取到角色的编号
String roleId = request.getParameter("roleId"); //开始根据角色的编号查询其下的权限资源
List<Map<String, Object>> resourcebyRole = bizUser.getResourcebyRole(roleId); List<Object> list = new LinkedList<Object>();
Iterator<Map<String, Object>> it = resourcebyRole.iterator();
//只获取到资源的名称，返回到前台即可
while(it.hasNext()){
Map<String, Object> resMap = it.next();
Object object = resMap.get("RES_NAME"); list.add(object);
}
//将资源的名称传递到前台的function(data){}的data.
return list;
}
（2）：前台使用Jquery进行后台数据处理：Jquery速查网址
$(document).ready(function(){
var roleId = null;
//获取到所有的角色RoleId
$(".roleId").each(function(){
//当鼠标移动到角色名称,触发事件，鼠标移入效果
$(this).mouseover(function(){
//鼠标点击效果,触发事件，鼠标移入效果
//$(this).click(function(){
//此句话获取到该span的id属性的值。
roleId = $(this).attr("id");
//alert(roleId);
//调用ajax异步请求，获取角色下面的资源
$.ajax({
type : "POST",//post类型请求。
data : {"roleId":roleId},//将每一次获取到角色id传递到后台。
url : "../right/getResource",//请求后台的路径
success : function(resourceByRole) {//参数即后台返回的数据。
//alert(resourceByRole);//先测试一下返回的数据是否正确
//判断是否为空或者为null
if(resourceByRole == null || resourceByRole == ""){
//然后根据div的class属性进行追加或者显示内容即可。
$(".resourceShow").html('<span style="color:red;">此角色下面没有权限</span>');
}else{
//
$(".resourceShow").text(resourceByRole);
}
},
});
})
});
});
案例三：根据jqPaginator分页插件，实现异步动态加载自己的数据，刷新前台显示分页内容。
3：官网就是这个样子，不过github的页面貌似没法显示：http://jqpaginator.keenwon.com/
（1）前台展示，由于项目的原因，前台进行阉割了，必要内容都贴出来了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqpaginator分页</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!--引入必须的插件，毕竟使用别人的插件-->
<script src="../js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<script src="../js/jqPaginator.min.js" type="text/javascript"></script>
</head>
<body> <table>
<thead>
<tr role="row">
<th >编号</th>
<th>时间</th>
<th>IP地址</th>
<th>操作对象</th>
<th>操作事件</th>
<th>结果</th>
</tr>
</thead>
<tbody id="tbody">
<%--
<c:forEach items="${logList }" var="logList" varStatus="status" begin="" step="">
<tr class="gradeX">
<td class="">${status.count}</td>
<td class="sorting_1">${logList.LOG_TIME}</td>
<td class="">${logList.LOG_SRC_IP}</td>
<td class="">${logList.APP_NAME}</td>
<td class="center">${logList.LOG_NAME}</td>
<td class="center">${logList.LOG_RESULT_DESC}</td>
</tr>
</c:forEach>
--%>
</tbody>
</table> <!---必须加id="pagination"-->
<ul id="pagination" id="pagination2"></ul> <!-- 分页操作 -->
<script type="text/javascript">
function getJsonLength(json){
var jsonLength=;
for (var i in json) {
jsonLength++;
}
return jsonLength;
} $.jqPaginator('#pagination', {
totalPages: ,//分页的总页数;默认0
visiblePages: ,//最多显示的页码数
//totalCounts: 10,//分页的总条目数；默认0
//pageSize: 10,//每一页的条目数；默认0
currentPage: ,//默认显示第几页
wrapper:'<ul class="pagination"></ul>',
first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
last: '<li class="last"><a href="javascript:void(0);">末页</a></li>',
onPageChange: function (num) {
$.ajax({
url: "../log/logList",
type: "POST",
dataType: 'json',
data: {"num": num},
success : function(data) {
//得到json值
var jsonLength = getJsonLength(data) - ;
var html = '';
//初始化后，动态修改配置,首先获取多少行,算出需要分几页
var totalCount = data[jsonLength].totalCount;
var pageTotal = Math.floor(totalCount / + );
$('#pagination').jqPaginator('option', {
//根据返回的总条目数动态显示页码总数
totalPages: pageTotal
});
//清空table里面的数据
$('#tbody').empty();
//循环遍历json字符串，然后动态赋值
for(var i=;i<jsonLength;i++){
var LOG_TIME = data[i].LOG_TIME;
var LOG_SRC_IP = data[i].LOG_SRC_IP;
var APP_NAME = data[i].APP_NAME;
var LOG_NAME = data[i].LOG_NAME;
var LOG_RESULT_DESC = data[i].LOG_RESULT_DESC;
html += '<tr>' +
'<td>' + LOG_TIME + '</td>' +
'<td>' + LOG_SRC_IP + '</td>' +
'<td>' + APP_NAME + '</td>' +
'<td>' + LOG_NAME + '</td>' +
'<td>' + LOG_RESULT_DESC + '</td>' +
'</tr>';
}
$('#tbody').append(html);
}
});
}
});
</script> </body>
</html>
（2）SpringMvc对数据进行处理和控制，由于直接调用别人写好的接口，控制层代码也许不适合你（奇葩的是，项目点击左边的栏目，跳转到一个页面，然后使用ajax异步加载出分页数据。）：
JsonUtils工具类，也行不是很适合你，将java的List<Map<key,value>>转化为Json格式的；：
public class JOSNUtil {
public static String object2String(Object data) throws IOException {
ObjectMapper om = new ObjectMapper();
SimpleFilterProvider filterProvider = new SimpleFilterProvider().setFailOnUnknownId(false);
om.setFilters(filterProvider);
return om.writeValueAsString(data);
}
/**
*
* json转换list.
* <br>详细说明
* @param jsonStr json字符串
* @return
* @return List<Map<String,Object>> list
* @throws
* @author slj
* @date 2013年12月24日 下午1:08:03
*/
public static List<Map<String, Object>> parseJSON2List(String jsonStr){
JSONArray jsonArr = JSONArray.fromObject(jsonStr);
List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();
Iterator<JSONObject> it = jsonArr.iterator();
while(it.hasNext()){
JSONObject json2 = it.next();
list.add(parseJSON2Map(json2.toString()));
}
return list;
}
/**
*
* json转换map.
* <br>详细说明
* @param jsonStr json字符串
* @return
* @return Map<String,Object> 集合
* @throws
* @author slj
*/
public static Map<String, Object> parseJSON2Map(String jsonStr){
ListOrderedMap map = new ListOrderedMap();
//最外层解析
JSONObject json = JSONObject.fromObject(jsonStr);
for(Object k : json.keySet()){
Object v = json.get(k);
//如果内层还是数组的话，继续解析
if(v instanceof JSONArray){
List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();
Iterator<JSONObject> it = ((JSONArray)v).iterator();
while(it.hasNext()){
JSONObject json2 = it.next();
list.add(parseJSON2Map(json2.toString()));
}
map.put(k.toString(), list);
} else {
map.put(k.toString(), v);
}
}
return map;
}
}
然后写控制层代码，如下所示：
@RequestMapping(value="/logList",method=RequestMethod.POST)
protected @ResponseBody void getLogTable(final HttpServletRequest request, final HttpServletResponse response)
throws Exception {
response.setCharacterEncoding("utf-8");
//获取到用户的id
Map<String,Object> userMap=getLoginUser(request);
String userId=String.valueOf(userMap.get(TbUser.USER_ID.name));
//封装查询条件
Map<String, Object> searchCond = new HashMap<String, Object>();
searchCond.put(TbLog.USER_ID.name, userId);
List<Map<String, Object>> logList = null; //日志总数
int totalCount = bizLog.getLogCount(searchCond);
//获取到第几页,
String Pagenum = request.getParameter("num");
System.out.println("Pagenum:" + Pagenum);
if(Pagenum == null){
Pagenum = "";
}
//日志总数
//int totalCount = bizLog.getLogCount(searchCond);
//获取到当前页数
int currentPageNum = Integer.parseInt(Pagenum);
//显示的条数
int pageLength = ;
//起始值
int startRow = (currentPageNum-) * pageLength + ;
//第几页
//int totalPage = totalCount / pageLength + 1; Map<String, Object> totalCountCond = new HashMap<String, Object>();
//判断Session中该值是否为空
if (userId != null) {
//根据参数查询日志信息，参数2是从第几个开始，即起始值。参数3是每页多少条数据。
logList = bizLog.getLogList(searchCond, startRow, pageLength);
totalCountCond.put("totalCount", totalCount);//这里封装一下查询的总数，然后传给前台解析出来，设置显示多少页码总数
logList.add(totalCountCond);
}
System.out.println(JOSNUtil.object2String(logList));
//转换为JSON格式
response.getWriter().write(JOSNUtil.object2String(logList));
response.getWriter().flush();
response.getWriter().close();
}
显示如下，反正吧，都是公司的项目，代码啊，截图啊，都是阉割的，凑活着看吧：
待续......
