81,095
社区成员
发帖
与我相关
我的任务
分享如何实现jsp的局部刷新？
一个页面A.jsp，由table1和table2组成，我通过select标签来选择不同的值，达到table2的内容更新的结果
备注：会根据select的内容操作数据库，将值显示在table2中。
备注：会根据select的内容操作数据库，将值显示在table2中。
...全文
请发表友善的回复…
发表回复
小龙在线 2012-02-27
- 打赏
- 举报
这种问题不是很难，灵活处理吧
a415473410 2012-02-27
- 打赏
- 举报
JQuery
fslfangxia 2012-02-27
- 打赏
- 举报
楼主可以用ajax和serverlet的组合啊！这个不需要action return的
hellobbboy 2012-02-27
- 打赏
- 举报
用JQuery的ajax就可以：
发送请求：
$.load("http://localhost:8080/yourProject/"+actionName, params,function(json){
//json 就是你返回的数据，你可以在这里获得并展示数据
});
楼主的问题是JQuery怎么获得action的返回值，
在action中，通过：
reponse.getWriter().print(returnString);
return null;
//return null,action就不会跳转任何页面，只是通过reponse返回数据了。
发送请求：
$.load("http://localhost:8080/yourProject/"+actionName, params,function(json){
//json 就是你返回的数据，你可以在这里获得并展示数据
});
楼主的问题是JQuery怎么获得action的返回值，
在action中，通过：
reponse.getWriter().print(returnString);
return null;
//return null,action就不会跳转任何页面，只是通过reponse返回数据了。
kongz007 2012-02-27
- 打赏
- 举报
建议楼主多多思考下
djinzaghi 2012-02-27
- 打赏
- 举报
通过jquery的load可以搞定。
$.load(url,params,callback)
其中params是一个Json格式的参数，可以理解成是请求参数。如：
var params={userid:v1,name:v2,sex:f}
claaback是一个回调函数。这个函数是指当load操作完成后，需要执行的代码。
写法跟Java中的匿名内部类相似。
url是指请求地址。
例子。var v1=$("#selectid").val();
var v2=$("#selectid2").val();
$.load(url,params,function cbf(){
alert('load successfuly');
});
$.load(url,params,callback)
其中params是一个Json格式的参数，可以理解成是请求参数。如：
var params={userid:v1,name:v2,sex:f}
claaback是一个回调函数。这个函数是指当load操作完成后，需要执行的代码。
写法跟Java中的匿名内部类相似。
url是指请求地址。
例子。var v1=$("#selectid").val();
var v2=$("#selectid2").val();
$.load(url,params,function cbf(){
alert('load successfuly');
});
昨日凡阳 2012-02-27
- 打赏
- 举报
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刷新，其实是通过刷新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中。
铁匠梁 2012-02-26
- 打赏
- 举报
JS定时器
gloomyfish 2012-02-26
- 打赏
- 举报
ajax, cometD, JQuery
简易人 2012-02-26
- 打赏
- 举报
楼主：你好，对于你提出问题，在下有两个建议，不知可否能对楼主有所帮助。
第一：楼主页面的布局是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里面的数据，实现局部刷新了！
第一：楼主页面的布局是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里面的数据，实现局部刷新了！
wyx100 2012-02-26
- 打赏
- 举报
用ajax咯，
用jquery，好实现
用jquery，好实现
qq737604771 2012-02-26
- 打赏
- 举报
jquery。dwr。 都可以。
昨日凡阳 2012-02-26
- 打赏
- 举报
ajax肯定要进后台，去数据库捞数据。只不过是局部刷新，整个页面你感觉好像没有刷新而已。
lynnlovemin 2012-02-26
- 打赏
- 举报
LZ 用ajax吧 jquery很好实现的 去学习下 很简单的
Acesidonu 2012-02-26
- 打赏
- 举报
ajax
楼主学习一下
楼主学习一下
tomosun 2012-02-26
- 打赏
- 举报
ajax,或者jquery都好实现
UU1221 2012-02-26
- 打赏
- 举报
没人会？
UU1221 2012-02-26
- 打赏
- 举报
[Quote=引用 3 楼 a3737500 的回复:]
引用 2 楼 mynamevane 的回复:
引用 1 楼 zuxianghuang 的回复:
用ajax咯，
用jquery，好实现
用ajax会经过Action吗？经过Action不是回到A.jsp吗？ 我的select标签的会重新显示，而不是停留在选择的那一项
你可以把你刚才下拉选择的那条 一直带着 返回页面的时候 把下拉列表的selected 换成你一直带着的值不就……
[/Quote]
selected属性没有用，就死在一个值上面 改变不了的...
引用 2 楼 mynamevane 的回复:
引用 1 楼 zuxianghuang 的回复:
用ajax咯，
用jquery，好实现
用ajax会经过Action吗？经过Action不是回到A.jsp吗？ 我的select标签的会重新显示，而不是停留在选择的那一项
你可以把你刚才下拉选择的那条 一直带着 返回页面的时候 把下拉列表的selected 换成你一直带着的值不就……
[/Quote]
selected属性没有用，就死在一个值上面 改变不了的...
GG瑾 2012-02-26
- 打赏
- 举报
楼主还没有理解异步刷新哟。
a3737500 2012-02-26
- 打赏
- 举报
[Quote=引用 2 楼 mynamevane 的回复:]
引用 1 楼 zuxianghuang 的回复:
用ajax咯，
用jquery，好实现
用ajax会经过Action吗？经过Action不是回到A.jsp吗？ 我的select标签的会重新显示，而不是停留在选择的那一项
[/Quote]
你可以把你刚才下拉选择的那条 一直带着 返回页面的时候 把下拉列表的selected 换成你一直带着的值不就行了 你好好理解异步的概念 页面是不会整体刷新的
引用 1 楼 zuxianghuang 的回复:
用ajax咯，
用jquery，好实现
用ajax会经过Action吗？经过Action不是回到A.jsp吗？ 我的select标签的会重新显示，而不是停留在选择的那一项
[/Quote]
你可以把你刚才下拉选择的那条 一直带着 返回页面的时候 把下拉列表的selected 换成你一直带着的值不就行了 你好好理解异步的概念 页面是不会整体刷新的
加载更多回复（2）
