最近,在做项目的时候,遇到一个问题,就是ajax的缓存问题:
具体的情况是,进行审批的时候,有审批理由和审批时间,如果填写的审批理由和审批时间,和第一次的相同,这个时候会出现相应的接口2,审批权限接口,后台业务逻辑调用不到,就是说不走审批权限接口2的后台,而页面上直接进行弹出框,"审批权限成功"的问题.
经过调查和努力:
问题解决,是ajax缓存照成的原因.
这个问题可以,通过在ajax的url中添加随机数,进行解决,当然也可以通过时间错的方式进行解决,这2个问题都可以解决,下面代码中,标明主主体的就是随机数.
如果遇到此问题的,可以看看,特此记录!!
下面是具体的jsp页面代码:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="java.lang.*"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setCharacterEncoding("utf-8");
String array = request.getParameter("array");
// 生成随机数
[b]Object aa=Math.random();
out.println(aa);[/b]
%>
<html>
<input id="array" type="hidden" value=<%=array%>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%=path%>/styles/coffers.css" />
<script type="text/javascript" src="<%=path%>/scripts/jquery-1.8.1.js" ></script>
</head>
<!--页面开始-->
<body onload="show()">
<form method="post" action="<%=path%>/applyTreasuryAuthCheck" name="form1"><p>
<div id="goldContainer">
<div id="goldFirst">
<div class="goldTitle">河北移动安全管控平台金库认证</div>
<div id="warningText">经检测，您的账号为安全管控平台管理员需要审批才能登陆，请您申请！</div>
<div id="goldFirstcontent">
<ul class="goldFirstlist">
<!--
<li class="goldFirstitem">
<p class="goldText">账号:</p> <input type="text" name="account"
id="account" class="account" value="" />
</li>
-->
<li class="goldFirstitem">
<p class="goldText">审批人:</p>
<select name="goldId" class="goldCheck" id ="goldId">
</select>
<p class="mustWrite">*</p>
</li>
<li class="goldFirstitem">
<p class="goldText">申请时长:</p> <input type="text"
name="goldMaxtime" id="goldMaxtime" class="goldMaxtime" value=""
required="required"
onkeyup="value=value.replace(/[^\d]/g,''),dealTime()"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" />
<p class="mustWrite">*（单位：分，最长60）</p>
</li>
<li class="goldFirstitem" style="height: 90px;">
<p class="goldText">申请原因:</p> <textarea name="goldReason"
id="goldReason" class="goldReason" rows="5" cols="55"
onkeyup="wordsDeal()"></textarea>
</li>
<!--加载等待提示信息-->
<div id="resloading"> </div>
<!--加载等待图片-->
<div id="loading"> </div>
<li class="goldFirstitem" style="text-align: right; margin: 0;">
<input type="button" name="goldLogin" id="goldLogin"
class="goldLogin" value="登录" onclick="sentAjax();"/>
<input type="button" name="authLogin" id="authLogin"
class="goldLogin" value="提交" style="display:none;" />
<input type="reset" name="goldRest" id="goldRest" onclick="javascript:history.back(-1);" class="goldRest" value="取消" />
</li>
</ul>
</div>
</div>
<input type="hidden" id="applyId" />
</div>
</form>
</body>
<!--页面主题 结束-->
</html>
<script type="text/javascript">
// 加载下拉列表
function show(){
// 得到表单中的array值
var myArray = document.getElementById("array").value;
// 赋值
var testArray = myArray;
var dataObj=jQuery.parseJSON(testArray);
for(var i=0;i<dataObj.approverName.length;i++){
$("#goldId").append("<option>"+dataObj.approverName[i]+"</option>");
}
for(var i=0;i<dataObj.approverCode.length;i++){
$("#goldId>option").eq(i).val(dataObj.approverCode[i]);
}
}
function sentAjax(){
Ajax1(); // 3.2 申请金库权限接口（IF-02）
}
// 3.2 申请金库权限接口（IF-02）
function Ajax1(){
var goldId = $("#goldId").val();
var eventId;
var applyId;
// 申请时长
var goldMaxtime = $("#goldMaxtime").val();
// 申请原因
var goldReason = $("#goldReason").val();
// var url = "memberlog_showLogComment.action?logid="+logid+"&
random="+Math.random();
var random ="<%=aa%>";
//alert(random);
var random1;
$.ajax({
url: "<%=path %>/applyTreasuryAuthCheck?goldId="+goldId+"&goldMaxtime="+goldMaxtime+"&goldReason="+encodeURIComponent(goldReason)+"&
random1="+random,
type:'POST',
data:'',
dataType:'json', //后台返回的数据类型
success:function(data){
eventId = data.eventId;
applyId = data.applyId;
if (data.code == "OPT_SUCCESS") {
alert("申请金库权限接口成功!!");
// 调用金库审批结果接口
$("#resloading").html("(已提交至审批人[安全管控平台],正在等待回复)");
$("#loading").html("<img src='<%=path%>/images/load.gif' />");
Ajax2(eventId,applyId);
// 操作失败提示信息
} else if(data.code == "OPT_FAIL"){
alert("调用申请金库权限接口操作失败");
} else if(data.code == "INVALID_TICKET"){
alert("调用申请金库权限接口错误的票据");
} else if(data.code == "INVALID_APPROVER"){
alert("调用申请金库权限接口无效的审批人");
} else if(data.code == "INVALID_RESID"){
alert("调用申请金库权限接口错误的资源编号");
} else if(data.code == "INVALID_RESUBMIT"){
alert("调用申请金库权限接口重复提交");
}
}
});
}
// 通知金库审批结果接口（IF-03）
function Ajax2(eventId,applyId){
// 得到下拉列表值
var myArrayList = document.getElementById("array").value;
// 申请时长
var goldMaxtime = $("#goldMaxtime").val();
// 申请原因
var goldReason = $("#goldReason").val();
// 取得账号
var account = $("#account").val();
var Y;
var t = setTimeout(function(){
$.ajax({
async: true,
dataType: "json",
data: {"eventId":eventId,"approveCode":Y},
type :'post',
cache : false,
url:"<%=basePath%>/alertApproveResult?eventId="+eventId+"&goldMaxtime="+goldMaxtime,
beforeSend:function(){
$("#resloading").html("(已提交至审批人[安全管控平台],正在等待回复)");
$("#loading").html("<img src='<%=path%>/images/load.gif' />"); //在后台返回success之前显示loading图标
},
success: function(data){
if(data.code == "OPT_WAIT"){
alert("审批人未关注到，请重新申请或更换审批人再次申请。");
}else if(data.code == "OPT_SUCCESS"){
window.location.href = '<%=path %>/pages/security/gold/gold_sms_verification.jsp?myArrayList='+encodeURIComponent(myArrayList)+'&applyId='+applyId+'&goldMaxtime='+goldMaxtime+'&goldReason='+goldReason+'&account='+account;
}else if(data.code == "OPT_FAIL"){
alert("审批人拒绝您访问该页面");
}
clearHtml();
},
error:function(jqXHR, textStatus, errorThrown){
if(textStatus=="timeout"){
alert("审批人未关注到，请重新申请或更换审批人再次申请。");
}else{
alert(textStatus);
}
clearHtml();
}
});
},1000);
}
function clearHtml(){
$("#loading").empty(); //ajax返回成功，清除loading图标
$("#resloading").empty(); //ajax返回成功，清除resloading图标
}
function wordsDeal() {
var curLength = $(".goldReason").val().length;
//alert(curLength);
if (curLength > 2000) {
var num = $(".goldReason").val().substr(0, 2000);
$(".goldReason").val(num);
alert("申请原因不超过2000字符");
}
}
function dealTime() {
var curContent = $(".goldMaxtime").val() * 1;
// alert(curContent)
if (curContent > 60) {
//alert("60");
var curContent = $(".goldMaxtime").val("60")
}
}
</script>
分享到：
相关推荐
然而，Ajax缓存问题可能会导致一些意料之外的状况，特别是当服务器端的数据发生变化时，浏览器仍然展示旧的缓存数据，这会给用户带来困扰，甚至可能导致错误的操作。本篇文章将深入探讨Ajax缓存问题及其解决方案。 ...
对于IE浏览器中的AJAX缓存问题，有两种常见的解决方案： 1. **添加随机参数** 为了防止IE浏览器缓存AJAX请求的结果，可以在每次发送AJAX请求时，向URL中添加一个随机参数，通常使用当前时间戳或者随机数。这样做...
以下是对AJAX缓存问题的详尽解析。 ### AJAX缓存问题的产生 在使用AJAX进行数据请求时，浏览器为了提高性能，通常会缓存HTTP响应。这在大部分情况下是积极的，因为对于静态资源，如图片和样式表，缓存可以减少网络...
在处理Ajax缓存问题时，可以根据具体需求选择合适的方法。对于简单的应用场景，可以通过在URL中添加随机数参数的方式快速解决问题；而对于更复杂的应用，可以考虑使用设置请求头的方式来更精细地控制缓存行为。无论...
Ajax缓存问题通常出现在当你使用Ajax进行数据交互时，客户端（通常是浏览器）为了提高加载速度，会自动将之前请求过的资源存储在缓存中。当你再次发起相同的请求时，浏览器可能会直接从缓存中获取数据，而不是去...
文章通过代码示例演示了一个处理AJAX缓存问题的函数`ajax_show`。在这个函数中，使用了`$.ajax`方法向服务器请求数据。`cache`参数未明确设置，因此它会使用jQuery默认的缓存行为。在Firefox中，为了实现类似IE浏览...
【IE下Ajax缓存问题的快速解决方法(get方式)】 在开发Web应用时，尤其是在使用Ajax技术时，可能会遇到浏览器缓存导致的问题。对于IE浏览器，由于其对GET请求的特殊处理，有时会缓存Ajax请求，从而影响到数据的实时...
总结来说，处理AJAX缓存问题的关键在于正确设置HTTP请求头，以确保浏览器始终获取最新的服务器数据。在Prototype库中，可以通过传递`requestHeaders`选项来设置这些头信息，确保每次请求都是新鲜的，不受缓存影响。...
IE8和IE9是微软公司推出的两个旧版浏览器，它们存在一些特定的兼容性问题，其中Ajax缓存问题就是一例。Ajax是异步JavaScript和XML的缩写，是一种在无需重新加载整个页面的情况下，能够更新网页部分区域内容的技术。...
Ajax缓存问题是指在使用Ajax技术进行网络请求时，浏览器或其他代理缓存可能会错误地返回过时的数据而不是向服务器发起新的请求。这种缓存行为可以提高应用程序的性能，但在某些情况下可能会导致数据不一致，尤其是当...
**一、Ajax缓存问题的由来** 在默认情况下，Ajax请求会被浏览器缓存，以提高性能。但这种缓存机制有时会导致用户看到的是旧的数据，而非服务器端最新的内容。特别是在开发阶段，频繁更改服务器数据时，这个问题尤为...
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。接下来通过本文给大家介绍IE8下Ajax缓存问题及解决办法，一起看下吧
#### 一、什么是AJAX缓存问题？ 当客户端发起 AJAX 请求时，默认情况下，浏览器会尝试缓存请求结果以提高性能。这意味着如果用户多次请求相同的数据，那么除非数据发生更改，否则浏览器将不会重新从服务器获取数据...
Ajax请求中的缓存问题 在Ajax请求中，如果客户端使用了浏览器的缓存功能，可能会遇到以下问题： - **数据一致性问题**：当服务器端的数据发生改变时，客户端仍使用旧的缓存数据，导致显示的数据不准确。 - **性能...
在JSP环境下，同样需要关注缓存问题，尤其是对于动态生成的内容。以下是一些常用的JSP缓存清除策略： 1. **设置响应头**：通过设置`response.setHeader()`方法，可以控制HTTP响应头，从而控制浏览器的缓存行为。...
然而，浏览器缓存机制有时会导致Ajax请求的数据不是最新的，这就是所谓的Ajax缓存问题。这种缓存问题会导致浏览器在发起Ajax请求时，并未向服务器请求新的数据，而是直接使用之前加载的缓存数据，从而使得获取的数据...