加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

AJAX入门

发布时间：2020-12-15 21:42:21 所属栏目：百科 来源：网络整理
导读：对于的一个工作的人来说当你接触到ajax的时候，你会发现除了可以用表单提交数据以外，没想到还可以用ajax提交数据，而且页面不用刷新，只改变了自己想要改变的一部分，你就会有点喜欢上它了，没错这就是ajax的强大之处。ajax使用起来很方便，不需要任何的插

对于的一个工作的人来说当你接触到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,function(data){
要看的主要是这句话。 url是你发送请求的地址，由于是在同一个项目中，所以没有加前缀，看起来不是那么完整， 
{lotteryId:lotteryId,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","活动已经结束");
			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,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,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

                        
（编辑：李大同）


【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

                    		
                  

                

            

            
    
            
    
            
    
            	
    相关内容
    

      

            
      
        
      
    
      
    
      
    	
      
        
      推荐文章
      
            
        
        
        
    	
        
        
        站长推荐
        
            
        
        
        
        
        
    	
        
        
        热点阅读
        
            
          
        
          
        
          
        
          
	
          

          

          

          

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。
          

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果
          

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同