参考：https://www.jb51.net/article/46622.htm

局部刷新是刷新页面的一部分，在此案例中实现的只是图标的改变，把后台代码和前台现实的图标分离，并不是对数据库重新做查询，二是后台数显数据修改之后，前台直接改变图标。

1.页面 给每条记录的图标一个唯一的id值：

<td align="center">
    <s:if test="messageState == 0">
<img src="${ctx}/images/04.png" id="r${message.messageID}"/>
    </s:if>
<s:else>
        <img src="${ctx}/images/03.png" id="r${message.messageID}"/>
    </s:else>
</td>

2.Ajax验证：给A标签添加的id= aUnread，再添加事件

jQuery("#aUnread").click(function(){
       var strIds="";//定义一个传递数据的变量
       $("input[name='checkbox']").each(function (){
        if(this.checked){
            strIds +=this.value+",";//得到的是多个id值，拼成字符串传到action
       }
    });
     $.ajax({
              type: "post",
              dataType:'json', //接受数据格式 
              cache:false,
              data:"strIds="+strIds,
              url: "${ctx}/feedbackonline/updateMessageStateUnread.action",
              beforeSend: function(XMLHttpRequest){
              },
              success: function(data){
                  var str=data.str;//接收返回的数据
                  for(var p in str){ //遍历接受的数组对象
                    var x="#r"+str[p];//获取要改变的记录的图标id
                    $(x).attr("src","${ctx}/images/04.png");
//把对应的id值的图标src属性值变成相应图标的路径
                  }
               },
              error: function(){
              //请求出错处理
                  alert("Error!");
              }
       });
    });

3.后台action:

private String strIds;//省略set get 方法，自动获取到页面传的响应的数据
private String[] str;//省略set get 方法
@Action("/updateMessageStateUnread")
    public String updateMessageState() throws Exception{
       String[] jStr = strIds.split(",");//把字符串拆分成字符串数组
       str=jStr;//把拆分的字符串数组赋给有get set方法的数组变量str返回到页面上
       for(int i=0;i<jStr.length;i++){
           int id=Integer.parseInt(jStr[i]);
           messageUserinfo=messageUserinfoManager.queryById(id);
           messageUserinfo.setMessageState(0);
           messageUserinfoManager.update(messageUserinfo);         
       }   
       return "ajax";
    }

 

全局刷新



局部刷新





前后端完全分离：客户端来渲染，放弃seo

在我们开发的时候，我们回时常用到javascript实现页面局部刷新，本文我们就和大家分享JQuery ajax局部刷新，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
案例：
描述：
1. 点击登录则弹出登录对话框
2. 如果用户名密码不正确，则提示错误信息
3. 当输入信息正确，则刷新登录信息，显示用户名和退出按钮
4. 点击退出弹出提示信息，然后确定后再次刷新用户名，回到了第一幅图片的位置
那这些简单的操作，都需要做一些什么工作呢？
1. 加载登录/(用户名-退出)的页面
2. 点击登录连接，打开登录对话框
3. 登录form表单提交时，对信息进行验证。
4. 验证通过后，关闭对话框，同时刷新1中的页面，显示“用户名-退出”
5. 点击退出a标签时，登出成功后再次刷新1中的页面，显示“登录”
加载登录/(用户名-退出)的页面
1. 给p一个id，用来做页面索引，使后面能够定位到此处。
2. 给一个url属性，使其在页面加载的时候向jfinal服务端获取对应信息，当然也就是为了局部刷新获取页面内容。// 有url的p主动请求服务端获取数据
$("p[url]", $p).each(function() {
var $this = $(this);
var url = $this.attr("url");
if (url) {
$this.ajaxUrl({
type : "POST",
url : url,
callback : function() {
}
});
}
});
通过url来定位到p，然后获取url，准备发起ajax请求。
当然ajaxUrl方法先不要去关注太多，稍后会进一步解释。
点击登录连接，打开登录对话框
复制代码 代码如下:
登录
1. 增加属性target为dialog属性，当然如果你还没有关注本系列教程，那么你可以回顾一下来看看怎么通过a标签打开一个对话框，看看如何打开模态对话框。
2. 增加width属性，设置对话框的宽度。
当输入信息正确，则刷新登录信息，显示用户名和退出按钮
复制代码 代码如下:
1. 这个form表单的属性就很关键了，action中增加了两个参数“callbackType=closeCurrent”、“rel=login_tip”，callbackType指定对话框在登录成功后要关闭，而rel则指定关闭对话框后刷新的局部对象。
2. validateCallback你可以参照 jfinal与bootstrap的登录跳转实战，里面有详细的介绍。
3. 然后对于dialogAjaxDone，就需要重点说明以下，请看以下内容。function dialogAjaxDone(json) {
YUNM.ajaxDone(json);
if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok || json[YUNM.keys.statusCode] == YUNM.statusCode.info) {
if (json.rel) {// 指定对应的p进行数据加载
var url = json.forwardUrl, options = {
elementId : json.rel
};
var op = $.extend({
data : {},
elementId : "",
callback : null
}, options);
var $panel = $("#" + op.elementId);
if (!url) {
url = $panel.attr("url");
}
if (url) {
$panel.ajaxUrl({
type : "POST",
url : url,
data : op.data,
callback : function(response) {
if ($.isFunction(op.callback))
op.callback(response);
}
});
}
}
if ("closeCurrent" == json.callbackType) {
close_pop();
} else if ("closeCurrentThenForward" == json.callbackType) {
close_pop();
if (json.forwardUrl) {
location.href = common.ctx + json.forwardUrl;
return;
}
}
}
}
1. 这里请看“if (json.rel) {”中的这串代码，该处通过json.rel，获取a标签上的系列参数，然后再次调用ajaxUrl方法，用来做局部刷新。
到了这里，就不得不说ajaxUrl这个方法了(function($){
// DWZ set regional
$.setRegional = function(key, value){
if (!$.regional) $.regional = {};
$.regional[key] = value;
};
$.fn.extend({
initUI: function(){
return this.each(function(){
if($.isFunction(initUI)) initUI(this);
});
},
loadUrl: function(url,data,callback){
$(this).ajaxUrl({url:url, data:data, callback:callback});
},
ajaxUrl: function(op){
var $this = $(this);
$this.trigger(YUNM.eventType.pageClear);
$.ajax({
type: op.type || 'GET',
url: op.url,
data: op.data,
cache: false,
success: function(response){
var json = YUNM.jsonEval(response);
if (json[YUNM.keys.statusCode]==YUNM.statusCode.error){
if (json[YUNM.keys.message]) $.showErr(json[YUNM.keys.message]);
} else {
$this.html(response).initUI();
if ($.isFunction(op.callback)) op.callback(response);
}
},
error: YUNM.ajaxError,
statusCode: {
503: function(xhr, ajaxOptions, thrownError) {
$.showErr("服务器当前负载过大或者正在维护!" || thrownError);
}
}
});
},
});
通过ajax请求，向jfinal端发起请求，然后接收对应的response，根据response状态，我们将对应的页面渲染内容显示到局部p中。
jfinal端就很简单了public void initLoginTip() {
logger.info("初始化登录/退出页面");
render("login_tip.jsp");
}
渲染到对应组件页面就OK了。
说到这，登录的局部刷新就完成了，只要你注意到对应的方法就好了。
点击退出a标签时，登出成功后再次刷新1中的页面，显示“登录”
对于退出，你当然还是可以参照jfinal与bootstrap的登出实战。
对于ajaxDone方法，你可以参照dialogAjaxDone方法。

在做网站时，网站不同页面大部分版块是相同的，只有某个版块的数据是变化的。这时我们可以使用AJAX局部刷新来实现表单提交时，在不变化网页地址的情况下更新某个版块数据。
下面介绍一下网站FORM表单提交AJAX局部刷新实现方法。
第一步：网站表单AJAX局部刷新实现需要信赖JQUERY，所以我们需要在网站代码里引入JQUERY；
第二步：下载表单AJAX局部刷新的JQUERY插件：jquery.form.js，下载地址： https://pan.baidu.com/s/1sfO0yFhWx6yruKee8twsZw 提取码: v61p
第三步：将下载的jquery.form.js上传到自己网站空间主题文件夹里，并使用以下的代码来引入jquery.form.js；(注意文件的路径)
第四步：在FORM表单里加入id="tablistsearchform"，例如：
第五步：在需要显示刷新内容的DIV，加上id="listconall"，例如 ：
第六步：在网站底部代码里