脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → ajax 局部和整体刷新

极致体验ajax局部和整体刷新

 更新时间：2015年09月23日 09:26:38   作者：山下小青  
本篇文章将向大家介绍如何通过jquery的load方法进行局部刷新，通过封装三个属性然后我们来使用，以此达到我们想要的效果，本文写的非常好，感兴趣的朋友一起看看吧

本篇文章将向大家介绍如何通过jquery的load方法进行局部刷新，load方法本身很简单，但是想要结合到jfinal和bootstrap的公共项目中，需要我们多加努力了。

首先我先来来说一下方案。

$p.load(url,data,function(response,status,xhr))

那么我们需要提供ajax请求的回调函数至少两个参数url以及jquery对象。

另外，我们还可能有地址栏重载的可能。

location.href

所以，我们还需要提供一个参数。

于是，我们封装三个属性

// 局部加载
    String elementId = getPara("elementId");
    String loadPage = getPara("loadPage");
    // 地址栏跳转路径
    String locationUrl = getPara("locationUrl");
    setAttr("elementId", elementId);
    setAttr("loadPage", loadPage);
    setAttr("locationUrl", locationUrl);
<a href="${ctx}/mem/logout?elementId=log_tip&loadPage=header_login_tip"
<form class="pop_login_form"
  action="${ctx}/mem/login?callbackType=closeCurrent&elementId=log_tip&loadPage=header_login_tip"

注意：

. jfinal端封装三个属性提供给前端的回调函数。

. jsp中将对应的参数传递给jfinal

然后，我们来使用

function dialogAjaxDone(json) {
  YUNM.ajaxDone(json);
  if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok || json[YUNM.keys.statusCode] == YUNM.statusCode.info) {
    if ("closeCurrent" == json.callbackType) {
      close_pop();
    }
    if (json.locationUrl) {
      location.href = json.locationUrl;
    } else {
      // 如果指定了后调转页面，进行调转
      $("#" + json.elementId).load(common.loadPath + json.loadPage + common.viewType);
    }
  }
}

我提供类似的方法，主要是按照标题中给出的方案。

注意点

要使用jquery的load方法，就必须将对应的页面所有的引用都加上。

<!DOCTYPE html PUBLIC "-//WC//DTD HTML . Transitional//EN" "http://www.w.org/TR/html/loose.dtd">
<html xmlns="http://www.w.org//xhtml">
<%@ page language="java" contentType="text/html; charset=utf-" pageEncoding="utf-"%>
<%@ include file="/components/common/taglib.jsp"%>
<script type="text/javascript">
$("a[target=ajaxTodo]").ajaxTodo();
</script>
<div>
  <c:choose>
    <c:when test="${sessionScope.username!=null}">
      <a href="javascript:void();" id="mycenter" style="">
        ${sessionScope.username}<s class="icon_arrow icon_arrow_down"></s>
      </a>
      <i class="line"></i>
      <a href="${ctx}/mem/logout?elementId=log_tip&loadPage=header_login_tip" target="ajaxTodo" callback="ajaxDone"
        atitle="你确定要退出吗？" id="user_login_out" style="padding: px;">退出</a>

结语：本文全部内容到此结束，我想你也得到了极致的体验。后续本站还有更多内容更新，请继续关注哦。

您可能感兴趣的文章:

相关文章

  • webform使用ajax访问后端接口的两种方法小结

    webform使用ajax访问后端接口的两种方法小结

    这篇文章主要介绍了webform使用ajax访问后端接口的两种方法小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11
  • 基于HTML5 Ajax实现文件上传并显示进度条

    基于HTML5 Ajax实现文件上传并显示进度条

    这篇文章主要介绍了基于HTML5 Ajax实现文件上传并显示进度条的相关资料,需要的朋友可以参考下
    2016-02-02
  • 给Ajax返回的HTML标签动态添加样式的方法

    给Ajax返回的HTML标签动态添加样式的方法

    这篇文章主要介绍了给Ajax返回的HTML标签动态添加样式的方法,需要的朋友可以参考下
    2017-04-04
  • Ajax实现异步加载数据

    Ajax实现异步加载数据

    这篇文章主要为大家详细介绍了Ajax实现异步加载数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 提交表单最简单的AJAX程序分享

    提交表单最简单的AJAX程序分享

    提交表单的方法有很多，而最简单的AJAX程序就属本文了，个人感觉还不错，喜欢的朋友可以学习下
    2013-09-09
  • IE9下Ajax无法刷新数据的缓存问题解决方法

    IE9下Ajax无法刷新数据的缓存问题解决方法

    使用jQuery的getJSON从后台定时获取数据并刷新界面，在IE9下却无法刷新数据，原因就是缓存的问题，下面是解决方法
    2014-09-09
  • Ajax引擎 ajax请求步骤详细代码

    Ajax引擎 ajax请求步骤详细代码

    这篇文章主要为大家详细介绍了Ajax引擎 ajax请求步骤详细代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • 关于ajax的多次请求问题

    关于ajax的多次请求问题

    下面小编就为大家带来一篇关于ajax的多次请求问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • Ajax长连接项目案例

    Ajax长连接项目案例

    所谓的长连接，就是不断去发送请求，把请求阻塞在服务器端，每次超过请求时间就去重新发送请求，下面以一个实例为大家详细介绍下，感兴趣的朋友可不要错过了哈
    2013-08-08
  • bootstrap select2 动态从后台Ajax动态获取数据的代码

    bootstrap select2 动态从后台Ajax动态获取数据的代码

    这篇文章主要介绍了bootstrap select2 动态从后台Ajax动态获取数据的代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12

最新评论