div.load()方式局部刷新div

主页面部分

<section class="content-header">
<h5>
数据字典
</h5>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-6">
<div class="box">
<div class="box-header with-border">
<h6 class="box-title">数据类型</h6>
<a class="btn btn-primary btn-flat btnbt pull-right" href="javascript:toadddatatype();">新增数据类型</a>
</div><!-- /.box-header -->
<div class="box-body table-responsive no-padding" style="overflow-x:hidden">
<table class="table table-hover table-text " id="typetable">
<thead>
<tr class="tabth" >
<th>序号</th>
<th>类型名称</th>
<th>类型代码</th>
<th style="padding-left: 20px;">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${datatypelist }" var="datatypelist" varStatus="s">
<tr onclick="clicktr(${datatypelist.id });">
<td>${s.index+1 }</td>
<td>${datatypelist.typename }</td>
<td>${datatypelist.typecode }</td>
<td>
<a class="fa fa-trash fa-lg text-danger" href="javascript:deletedatatype(${datatypelist.id })"></a>
<a class="fa fa-pencil fa-lg" style="margin-left: 20px;" href="javascript:toupdatedatatype(${datatypelist.id })"></a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div><!-- /.box-body -->
</div>
<!-- /.box -->
</div><!-- /.col -->

<div class="col-md-6">
<div class="box" id="Data">
<div class="box-header with-border">
<h6 class="box-title">数据字典</h6>
<a class="btn btn-primary btn-flat btnbt pull-right" href="javascript:toadddatadictionary();">新增数据</a>
</div><!-- /.box-header -->
<div class="box-body table-responsive no-padding" style="overflow-x:hidden" >
<table class="table table-hover table-text " id="datatable">
<thead>
<tr class="tabth" >
<th>序号</th>
<th>分类</th>
<th>键</th>
<th>值</th>
<th style="padding-left: 20px;">操作</th>
</tr>
</thead>
</table>
</div><!-- /.box-body -->
</div>
<!-- /.box -->
</div>

</div><!-- /.row -->
</section><!-- /.content -->

javascript

//类型与数据表联动
function clicktr(typeid){
$("#Data").load("${ctx }/system/dictionary/selectdatabyid?typeid="+ typeid,function(response,status,xhr){   //div的id用来load刷新   请求后台
if(status!="success"){
if(xhr.status==444){
alert(xhr.responseText);
}
else{
alert(status);
}

}
}
);
}

次页面，用来更新div的内容  刷新

<div class="box-header with-border">
<h6 class="box-title">数据字典-${datatype.typename }</h6>
<a class="btn btn-primary btn-flat btnbt pull-right" href="javascript:toadddata(${datatype.id });">新增数据</a>
</div><!-- /.box-header -->
<div class="box-body table-responsive no-padding" style="overflow-x:hidden" >
<table class="table table-hover table-text " id="datatable">
<thead>
<tr class="tabth" >
<th>序号</th>
<th>分类</th>
<th>键</th>
<th>值</th>
<th style="padding-left: 20px;">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${ datalist}" var="datalist" varStatus="s">
<tr>
<td>${s.index+1 }</td>
<td>${datalist.typename }</td>
<td>${datalist.paramkey }</td>
<td>${datalist.paramvalue }</td>
<td>
<a class="fa fa-trash fa-lg text-danger" href="javascript:deletedatadictionary(${datalist.id },${datalist.typeid });"></a>
<a class="fa fa-pencil fa-lg" style="margin-left: 20px;" href="javascript:toupdatedatadictionary(${datalist.id });"></a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div><!-- /.box-body -->

Controller 

/**
* 两张表格联动
* @author cjq
* 2017年2月24日
*/
@RequestMapping("/selectdatabyid")
public String selectdatabyid(
@RequestParam(value = "typeid", required = false) Integer typeid,
Model model, HttpServletRequest request,
HttpSession session) {
List<DataDictionary> datalist=dictionaryservice.selectdatabytypeid(typeid);
request.setAttribute("datalist", datalist);
DataType datatype=dictionaryservice.selectdatatypebyid(typeid);
model.addAttribute("datatype", datatype);
return "system/dictionarydata";      //返回次页面刷新div
}

拦截a标签的href提交跳转页面    div.load局部刷新

//拦截a标签
var links = document.querySelectorAll('a');   
Array.prototype.forEach.call(links, function (link) {
link.addEventListener('click', function (evt) {
if(this.target=="datasetTab"){                   //循环中用this表示当前
evt.preventDefault();
$("#mainTab").load(this.href,function(response,status,xhr){
if(status!="success"){
if(xhr.status==444){
alert(xhr.responseText);
}
else{
alert(status);
}
}
}
);
}
});
});