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 οnclick="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);
}
}
}
);
}
});
});

转载于:https://www.cnblogs.com/1234cjq/p/6437718.html

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
用ajax局部刷新div刷新div为空。页面是登入后从别的页面执行action转过来的,这会影响吗? // div内容 (display设置为block加载出来也是空) ``` <div class="content" id="abnormal" style="display:none"> <!-- <font size="3">车牌号码:</font> <input type="text"></input> <input type="submit" value="登记"></input> <input type="text" value="输入车位号码"> --> <!-- <div style="width:70%;margin-bottom:20px;text-align:center"> <input type="text" name="word" placeholder="请输入车位号码"/> <input type="submit" value="Search"/><br/> </div> --> <s:form name="fm"> <table id="box-table-a" style="width:70%;margin:auto"> <tr> <th>车位号码</th> <th>车位状态</th> <th>车牌号码</th> <th>状态修改</th> </tr> <s:iterator value="#plist" status="st" id="list" begin="0" end="8"> <s:if test ="#st.last!=true && #st.index<11"> <tr> <td id="pid"><s:property value="#list.id"/></td> <td><s:if test="#list.status == 'idle' ">空闲</s:if> <s:elseif test="#list.status == 'assigned' ">已分配</s:elseif> <s:else>异常</s:else></td> <td><s:if test="slist[#st.index] == null ">无车辆</s:if> <s:else><s:property value="slist[#st.index]"/></s:else></td> <td><input class="corner-button" type="button" onclick="javascript:updateLoc(this)" value="Click me"></td> </tr> </s:if> <s:else><tr> <td id="pid"><s:property value="plist[#st.index].id"/></td> <td><s:if test="plist[#st.index].status == 'idle' ">空闲</s:if> <s:elseif test="plist[#st.index].status == 'assigned' ">已分配</s:elseif> <s:else>异常</s:else></td> <td><s:if test="slist[#st.index] == null ">无车辆</s:if> <s:else><s:property value="slist[#st.index]"/></s:else></td> <td><input class="corner-button" type="button" onclick="javascript:updateLoc(this)" value="Click me"></td> </tr> </s:else> </s:iterator> </table> </s:form> </div> ``` 提交修改内容 (如果把本页面提出来,不放在WEB-INF下,且地址填 $('#abnormal').load('http://localhost:8088/parking/operator.jsp #abnormal');的话,会报错) ``` function updateLocation(){ var loc=document.getElementById("formloc").text; var type=document.getElementById("type").value; //alert(user+type); $('#myModal').modal('hide') $.ajax({ type:"POST", url:"setAbnormal.action", data:{ "loc":loc, "type":type }, dataType:"json", catche:false, success:function(data){ //alert(""); //window.location.reload(); } }); alert("修改成功!"); $('#abnormal').load('http://localhost:8088/parking/login.action #abnormal'); } ``` ajax提交后执行的代码 ``` public String execute(){ ParkinfoDao dao=new ParkinfoDao(); //System.out.println(getUser()+":"+getType()); dao.updateParking_info(dao.findLocById(loc),type); plist=pdao.getPiList(); slist=rdao.getCarNum(); HttpServletRequest request=ServletActionContext.getRequest(); HttpSession session=request.getSession(); session.setAttribute("plist", plist); //String s=(String)session.getAttribute("username"); //System.out.println(s); //request.getSession(false); //session. return SUCCESS; } ``` struts.xml文件 ``` <action name="login" class="com.admin.LoginAction" method="execute"> <result name="success">/WEB-INF/operator.jsp</result><!-- /WEB-INF --> <result name="login">/WEB-INF/sysadmin.jsp</result> <result name="error">/login.jsp</result> </action> <!-- 设置异常 --> <action name="setAbnormal" class="com.admin.UpdateAbnormalAction" method="execute"> <result name="success">/WEB-INF/operator.jsp</result> </action> ```
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页