最近,在做项目的时候,遇到一个问题,就是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][b][color=red]Object aa=Math.random();[/color][/b]
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 οnlοad="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"
οnkeyup="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"
οnkeyup="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="登录" οnclick="sentAjax();"/>
<input type="button" name="authLogin" id="authLogin"
class="goldLogin" value="提交" style="display:none;" />
<input type="reset" name="goldRest" id="goldRest" οnclick="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+"&[b]random="+Math.random();
var random ="<%=aa%>";[/b]
//alert(random);
var random1;
$.ajax({
url: "<%=path %>/applyTreasuryAuthCheck?goldId="+goldId+"&goldMaxtime="+goldMaxtime+"&goldReason="+encodeURIComponent(goldReason)+"&[b]random1="+random[/b],
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>
具体的情况是,进行审批的时候,有审批理由和审批时间,如果填写的审批理由和审批时间,和第一次的相同,这个时候会出现相应的接口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][b][color=red]Object aa=Math.random();[/color][/b]
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 οnlοad="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"
οnkeyup="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"
οnkeyup="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="登录" οnclick="sentAjax();"/>
<input type="button" name="authLogin" id="authLogin"
class="goldLogin" value="提交" style="display:none;" />
<input type="reset" name="goldRest" id="goldRest" οnclick="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+"&[b]random="+Math.random();
var random ="<%=aa%>";[/b]
//alert(random);
var random1;
$.ajax({
url: "<%=path %>/applyTreasuryAuthCheck?goldId="+goldId+"&goldMaxtime="+goldMaxtime+"&goldReason="+encodeURIComponent(goldReason)+"&[b]random1="+random[/b],
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>