对于的一个工作的人来说当你接触到ajax的时候,你会发现除了可以用表单提交数据以外,没想到还可以用ajax提交数据,而且页面不用刷新,只改变了自己想要改变的一部分,你就会有点喜欢上它了,没错这就是ajax的强大之处。ajax使用起来很方便,不需要任何的插件;它向服务器发送请求只需传递一部分有用的数据,而不需要将整个页面提交给服务器,这样不仅降低了服务器和宽带的压力,当页面接受数据时也不需要刷新整个页面,只需改变需要改变的地方,而且提升了用户的使用感(这个地方我不知道怎么措辞)。
今天闲着没什么事,就想着整理一下现在用到的ajax,而且现在用到的我觉得很好用,先写在这里放着,以后说不定也会用到或者给别人一些参考。
js代码:
var url="/huodongAC.d?m=choujiang&class=DafuwengHc";
var key = "${requestScope.key}";
$.getJSON(url,{lotteryId:lotteryId,shopJifenNumber:shopJifenNumber,key:key},function(data){
var isStop = data.root.isStop;
var isGetPrize = data.root.isGetPrize;
var isStopDieTription = data.root.isStopDieTription;
var isFromAPP = data.root.isFromAPP;
var isLogin = data.root.isLogin;
var NumberNotEnough = data.root.NumberNotEnough;
var prizeListNumber = data.root.prizeListNumber;
var prizeName = data.root.prizeName;
var prizeNumber = data.root.prizeNumber;
var pointNumber = data.root.pointNumber;
console.log(pointNumber);
isFromAjax = data.root.isFromAjax;
num = prizeNumber;
if(round<=4){
setTimeout(showTankuang,5200);
}else{
setTimeout(showTankuang,3000);
}
function showTankuang(){
if(isStop=="true"){
$(".js_noGetPrize").show();
$(".js_littleTitle").text("不好意思");
$(".js_littleContent").text(isStopDieTription);
$(".close").hide();
return false;
}
if(isLogin=="false"){
$(".js_noGetPrize").show();
$(".js_littleTitle").text("不好意思");
$(".js_littleContent").text("请先登陆");
return false;
}
if(NumberNotEnough=="false"){
$(".js_noGetPrize").show();
$(".js_littleTitle").text("不好意思");
$(".js_littleContent").text("您的积分不够了");
return false;
}
if(prizeListNumber=="false"){
$(".js_noGetPrize").show();
$(".js_littleTitle").text("不好意思");
$(".js_littleContent").text("您的积分不够了");
return false;
}
if(isGetPrize=="false"){
$(".js_shopJifen").attr("onclick","changeShopJifen()");
$(".js_noGetPrize").show();
$(".js_littleTitle").text("别灰心");
$(".js_littleContent").text("换个姿势再来一次吧");
}
if(isGetPrize=="true"){
$(".js_shopJifen").attr("onclick","changeShopJifen()");
$(".js_getPrize").show();
$(".js_prizeDiscription").text(prizeName+"属于你");
}
totalPoint = pointNumber;
$(".js_myPoint").text(pointNumber);
}
});
$.getJSON(url,{lotteryId:lotteryId,shopJifenNumber:shopJifenNumber,key:key},function(data){
要看的主要是这句话。
url是你发送请求的地址,由于是在同一个项目中,所以没有加前缀,看起来不是那么完整,
{lotteryId:lotteryId,shopJifenNumber:shopJifenNumber,key:key}这个就是传递给服务器的参数,已key:value的形式来传递的,传递多个参数的话就以逗号隔开。
function(data){}就是请求完成后所执行的回调函数,data的形式一般是json格式的,但也可以是html或者xml格式的
</pre><pre name="code" class="javascript">后台处理请求的方法
<pre name="code" class="java">public StrMvPo choujiang(HttpServletRequest request,HttpServletResponse response,ApplicationContext ManageAppContext) throws NoSuchAlgorithmException, NoSuchPaddingException, Exception{
StrMvPo po =new StrMvPo();
po.setMvstr("/activityshow/dafuweng/lottery/dafuwengJson.jsp");
String lotteryId = request.getParameter("lotteryId");
String shopJifenNumber = StringUtil.isNullStr(request.getParameter("shopJifenNumber"))?"100":request.getParameter("shopJifenNumber");//抽奖时,所压积分的大小
int shopJifenNumberInt = Integer.parseInt(shopJifenNumber);
DafuwengS dfws = (DafuwengS)ManageAppContext.getBean("dafuwengS");
WapLotteryDafuwengInfo lotteryInfo = dfws.getDafuwengInfoById(lotteryId);
//判断活动是否结束
Date now = new Date();
Date lotteryStartTime = lotteryInfo.getStarttime();
Date lotteryEndTime = lotteryInfo.getEndtime();
if (lotteryEndTime.after(now) && now.after(lotteryStartTime)&&"doing".equals(lotteryInfo.getIsstop())){
request.setAttribute("isStop","false");
}else if (now.before(lotteryStartTime)){
request.setAttribute("isStop","true");
request.setAttribute("isStopDieTription","活动尚未开始");
return po;
}else{
request.setAttribute("isStop","true");
request.setAttribute("isStopDieTription","活动已经结束");
return po;
}
//判断用户是否在正常抽奖
String key = request.getParameter("key");//加密后的电话号码
SoufunUser user = new SoufunUser();
user = ActivityUtil.getUserInfoBySfut(request,response);
String phone = "1";
if(StringUtil.isNullStr(user.getPhone())){
request.setAttribute("isLogin", "false");
return po;
}else{
phone = DES.decodeDES(key,"9e1c0wap", "wap6g0g4");
if(!user.getPhone().equals(phone)){
request.setAttribute("isLogin", "false");
return po;
}
}
//判断用户的积分数是否够这次抽奖
String point = ActivityUtil.getMyPoints(user.getUserid());
int pointInt = Integer.parseInt(point);
if(pointInt-shopJifenNumberInt<0){
request.setAttribute("NumberNotEnough","false");
return po;
}
//isAPP就是只在APP上推的,noAPP是在网页上也可以玩的
String fromAPP = "false" ;
if("isAPP".equals(lotteryInfo.getPlaylimit())){
String[] strSeq={"unlim","fang","zf","xinfang"};
boolean isFromAPP = ActivityTempUtil.requestOrigin(request,strSeq);
if(isFromAPP){
fromAPP = "true";
request.setAttribute("isFromAPP","true");
}else{
fromAPP = "false";
request.setAttribute("isFromAPP","false");
}
}else{
fromAPP = "true";
}
request.setAttribute("pointNumber", pointNumber);
request.setAttribute("isFromAjax", "true");
return po;
}
后台方法只粘贴了一半,后台处理方法大家只需注意连个地方就好了
一个地方是:String lotteryId = request.getParameter("lotteryId");这句话是接受参数的,这里的lotteryId是和ajax所传递的参数{lotteryId:lotteryId,shopJifenNumber:shopJifenNumber,key:key}中lotteryId:lotteryId第一个otteryId相对应的,如果传递参数写成id:lotteryId的形式,那么为了接受参数,后台的代码要改写成String lotteryId = request.getParameter("id");我想这点大家都懂了吧。
当后台对参数处理完毕后,如何将得出的结果传递给前端。大家一般是想将数据变为json格式的,再传递给前端,而我这里是返回的一个modeandlview对象(StrMvPo相当于ModelAndView),这就是我现在用到的和大家有所不同的地方。这里是先将得到的数据存储到request里面,如: request.setAttribute("isFromAPP","true");
再到dafuwengJson.jsp这个页面将request里面存储的数据取出来组成一个json格式的数据
dafuwengJson.jsp的内容</span>
<pre name="code" class="html" style="font-family: Arial, Helvetica, sans-serif;"><%@ taglib prefix="json" uri="http://www.atg.com/taglibs/json"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<json:object>
<json:object name="root">
<json:property name="isStop" value="${requestScope.isStop}"/>
<json:property name="isStopDieTription" value="${requestScope.isStopDieTription}"/>
<json:property name="isFromAPP" value="${requestScope.isFromAPP}"/>
<json:property name="isLogin" value="${requestScope.isLogin}"/>
<json:property name="NumberNotEnough" value="${requestScope.NumberNotEnough}"/>
<json:property name="prizeListNumber" value="${requestScope.prizeListNumber}"/>
<json:property name="isGetPrize" value="${requestScope.isGetPrize}"/>
<json:property name="prizeName" value="${requestScope.prizeName}"/>
<json:property name="prizeNumber" value="${requestScope.prizeNumber}"/>
<json:property name="pointNumber" value="${requestScope.pointNumber}"/>
<json:property name="isFromAjax" value="${requestScope.isFromAjax}"/>
</json:object>
</json:object>
这样就将后台处理后的数据给取出来了,不过这还没完,因为这只是将数据放在了dafuwengJson.jsp里面,而ajax请求还没有得到这个数据,dafuwengJson.jsp只是起到一个将数据转变为json格式并暂时存储的作用。让我们回到前面的ajax请求,我们会发现在回调函数中有这样的语句
var isStop = data.root.isStop;
var isGetPrize = data.root.isGetPrize;
这几句话就是从dafuwengJson.jsp中取出后台传过来的数据其中data.root.isStop的isStop就和<json:property name="isStop" value="${requestScope.isStop}"/>的isStop相对应。
这样一个ajax请求就完成了,不知道你清楚了没。我想对于那些了解ajax的人会觉得我废话连天,但对于不懂的人来说,我多唠叨几句就可以给你解决一个迷惑,我觉得还是值得的。
你如果看了还是不清楚的话,下面是我在网上找的一段比较常用的ajax形式,我觉得写的比较好
http://www.php100.com/html/program/jquery/2013/0905/5912.html