记录自己实现的Ajax局部加载完成时的数据刷新
直接上代码
前端jsp
// An highlighted block
<table class="table table-striped" id="tab">
<thead>
<tr>
<th>客户编号</th>
<th>客户姓名</th>
<th>联系方式</th>
<th>预估价值</th>
<th>定义价值</th>
<th>价值度</th>
<th>当前类型</th>
<th>备注</th>
<th></th>
</tr>
</thead>
<tbody>
<!-- 愿用EL表达式渲染数据,后改用Ajax异步刷新 -->
<c:forEach var="Customer" items="${requestScope.Customer}">
<form action="modifyCus" method="post">
<tr>
<td><input type="text" class="form-control" name="customerId" readonly = "readonly" value="${Customer.customerId}" /></td>
<td><input type="text" class="form-control" name="customerName" value="${Customer.customerName}" /></td>
<td><input type="text" class="form-control" name="contactWay" value="${Customer.contactWay}" /></td>
<td><input type="text" class="form-control" name="estimatedValue" value="${Customer.estimatedValue}" /></td>
<td><input type="text" class="form-control" name="confirmValue" value="${Customer.confirmValue}" /></td>
<td><input type="text" class="form-control" name="value" value="${Customer.value}" /></td>
<td><input type="text" class="form-control" name="kind" value="${Customer.kind}" /></td>
<td><input type="text" class="form-control" name="remarks" value="${Customer.remarks}" /></td>
<td><input type="submit" class="btn btn-info btn-sm" value="编辑并提交" /></td>
<td><a class="btn btn-danger btn-sm" href="DeleteCus?customerId=${Customer.customerId}">删除</a></td>
</tr>
</form>
</c:forEach>
</tbody>
</table>
JS代码(核心代码)
//Ajax 实现页面加载时的局部刷新
$(document).ready(function(){
$.ajax({
//跳转对象,此处指向Controller层的方法
url: "findAllCustomer",
type: "post",
//返回类型,此处注意,填写json时不能正确解析,应转换为text
dataType : "text",
success:function(JsonList){
var result = JsonList;
var con ='';
//遍历Json对象,此处注意,因为传过来的Json不是不同的Json,而是Json对象,Js需要的是JavaScript对象,此时要做类型转换
$.each(JSON.parse(result), function(i,item){
//拼接Html语句,遍历出的Json值可以在此处赋值到页面中
con +='<tr><td><input type="text" class="form-control" name="customerId" readonly = "readonly" value="' + item.customerId+ ' ">'
+ '</td><td><input type="text" class="form-control" name="customerName" value="' + item.customerName+ ' ">'
+ '</td><td><input type="text" class="form-control" name="contactWay" value="' + item.contactWay+ ' ">'
+ '</td><td><input type="text" class="form-control" name="estimatedValue" value="' + item.estimatedValue+ ' ">'
+ '</td><td><input type="text" class="form-control" name="confirmValue" value="' + item.confirmValue+ ' ">'
+ '</td><td><input type="text" class="form-control" name="value" value="' + item.value+ ' ">'
+ '</td><td><input type="text" class="form-control" name="kind" value="' + item.kind+ ' ">'
+ '</td><td><input type="text" class="form-control" name="remarks" value="' + item.remarks+ ' ">'
+ '</td><td><input type="submit" class="btn btn-info btn-sm" value="编辑并提交" /></td>'
+ '<td><a class="btn btn-danger btn-sm" href="DeleteCus?customerId=' + item.customerId
+ '">删除</a></td></tr>'
;
});
alert(con);
//取得id=tab 的DOM表格对象,将Html语句拼接到该位置
$('#tab').append(con);
},
error: function (XMLResponse) {
//返回失败信息
alert(" 错误信息:" + XMLResponse.responseText);
}
});
});
后台Controller代码(使用的是SpringMVC)
/*
* 查询全部客户(客户公海)
*/
@RequestMapping("/findAllCustomer")
public void findAllCustomer(HttpServletResponse response){
List<Customer> customersList = new ArrayList<Customer>();
customersList.addAll(service.findAllCustomer());
//使用Fastjson把list转换成Json
String JsonRes = JSON.toJSONString(customersList);
System.out.println("进入时加载全部客户");
System.out.println("list型数据: "+customersList.get(0));
System.out.println("Json型数据: "+JsonRes);
try {
//返回Json到Ajax中
response.getWriter().println(JsonRes);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
此次包含了前台实现局部跳转,即导航栏和侧边栏不变,指定DIV加载需要的页面
前端JSP代码
<li class="list li_dep">
<a data-id="CustomerGH"> 公海</a>
<a href="transAddDep"> 商机</a>
<a href="transAddDep"> 客户</a>
</li>
关键代码 data-id=“CustomerGH” 存储data-id的内容送到JS中,作为跳转的辨识条件。
ps:记得顶层ul中添加class 以便让Jq取到
<ul class="nav nav-sidebar userMenu">
JS内容(核心代码)
/*
* 保持侧边栏和导航栏不动,实现局部刷新
*/
$(function() {
$(".userMenu").on("click", "a", function() {
//获取data-id的值
var sId = $(this).data("id");
//设置锚点
window.location.hash = sId;
loadInner(sId);
});
function loadInner(sId) {
//记录当前锚点
var sId = window.location.hash;
var pathn , i;
switch(sId) {
case "#center":
pathn = "GongHai.jsp";
i = 0;
break;
case "#account":
pathn = "TestTrans.jsp";
i = 1;
break;
case "#trade":
pathn = "TestTrans2.jsp";
i = 2;
break;
case "#CustomerGH":
pathn = "CustomerGH.jsp";
i = 3;
break;
case "#T1":
pathn = "T1.jsp";
i = 4;
break;
}
//选中区块加载相对应的内容
$("#MContent").load(pathn);
}
});