如何实现jsp的局部刷新?
一个页面A.jsp,由table1和table2组成,我通过select标签来选择不同的值,达到table2的内容更新的结果
备注:会根据select的内容操作数据库,将值显示在table2中。
------解决方案--------------------用ajax咯,
用jquery,好实现
------解决方案--------------------
------解决方案--------------------ajax,或者jquery都好实现
------解决方案--------------------ajax
楼主学习一下
------解决方案--------------------楼主:你好,对于你提出问题,在下有两个建议,不知可否能对楼主有所帮助。
第一:楼主页面的布局是2个table 进行布局的,想通过table1表单上面的select下拉框来决定,table2表单中的某些值,对吧!下面我给楼主两个建议吧:
1)、字符串:
如果楼主,想通过简单select 下拉框,操作一下数据库,并将操作后需要的值以字符串形式传入的table2出显示的话,这个可以采用ajax方式进行操作,或者目前比较超的JQuery 方式也可以:如下:
select 下拉事件
function onchange(id){
$.ajax({
type:"POST",
url:url,
data:{
…请求的值id
}
success:function(data){
……返回的值
}
})
}
2)、List 操作
如果楼主通过select下拉框操作,返回的一个list的话,那楼主要想实现局部刷新的话,那么table2出,就得,框上一个iframe了!这样楼主就只刷新iframe里面的数据,实现局部刷新了!
------解决方案--------------------jquery做会比较方便一些。局部刷新实现。
jquery刷新,其实是通过刷新dom对象来实现刷新的。
给你个例子,是我做的上传的例子。
//ajax初始化上載列表,供修改使用
function initFileUpload()
{
//ajax刪除文件
$.get("<%=request.getContextPath()%>/<%=PFMConstants.PFM_MODULE_FILE_UPLOAD_INFO%>/initUploadFile.htm",//URL
{},//傳入的參數
function(data, textStatus){//回調方法
var fileLists = JSON.parse(data);
//先移除之前的信息,再加载
$("#tab1 tbody").find('tr:not(:first)').remove();
var html = "";
$.each(fileLists,function(index,comm){
html+="<tr class='table-odd-row'>"
+"<td class='table-other-column'><a href='javascript:void(0)' onclick='return deleteFile("+fileLists[index].fileNo+");'><img src='${ctx}/images/u78.png' width='16' height='16' border='0' alt='刪除'></a></td>"
+"<td class='table-string-column'><a href='<%=request.getContextPath()%>/<%=PFMConstants.PFM_MODULE_FILE_UPLOAD_INFO%>/downloadFile.htm?wh=real&fileName="+fileLists[index].aliasFileName+"' onclick='return checkFileExist(\""+fileLists[index].aliasFileName+"\");'>"+fileLists[index].fileName+"</a></td>"
+"<td class='table-string-column'>"+fileLists[index].strUploadDate+"</td>"
+"<td class='table-string-column'>"+fileLists[index].uploadUser+"</td>"
+"<td class='table-num-column'>"+fileLists[index].fileSize+"</td>"
+"<td class='table-string-column'>"+fileLists[index].comments+"</td>"
+"</tr>";
});
$("#tab1 tbody").html(html);
});
return false;
}
我上面这段的意思是:删除table中的一条记录,通过jquery实现删除,然后去后台,调用数据库再查一遍数据库,把资料捞出来,循环再显示在table中。
------解决方案--------------------通过jquery的load可以搞定。
$.load(url,params,callback)
其中params是一个Json格式的参数,可以理解成是请求参数。如:
var params={userid:v1,name:v2,sex:f}
claaback是一个回调函数。这个函数是指当load操作完成后,需要执行的代码。