Ajax异步请求

时间: 2019-07-22阅读: 1319标签: ajax

其实我理解前端如何通过url从后端获取数据,对于异步请求Ajax一直表示有点迷惑,所谓不尝试和不探索,光靠看概念你是永远不能理解代码的魅力的,正好公司的项目里用到了最经典的Ajax,正好作为一个案例来学习如何用json的Data数据前端进行异步请求并显示数据.

首先你要知道什么是Ajax技术,我记得猫和老鼠里面倒是有Ajax,那还是我第一次听说有这么个难听的单词,我甚至都不知道怎么去拼写.

对于官方的解释,Ajax是一种创建快速动态网页的技术,最通俗的就是我们一般点击表单,数据会传送到后台,然后重新转发给我们需要的页面,但是Ajax在页面更新内容的时候,不需要重载整个页面.

所以它是很方便的,下面直接上案例吧.


首先是配置文件

<action name="getOplActionByOplID" class="com.qas.action.QaDetailAction" method="getOplActionByOplID">
    <result type="json" name="json">
        <param name="root">jsonData</param>
    </result>
</action>

因为项目框架用的是struts和hibernate 你会看到action

可以看到返回的结果 name = "root"  为 jsonData的数据格式

那么我们定位到这个所在类和所在的方法

看到定义的jsonData

protected Map<String, Object> jsonData = new LinkedHashMap<String, Object>();

然后我们观察该方法

//ajax,根据OPLID返回出他的OplAction
public String getOplActionByOplID(){
    Opl opl=oplService.getOplById(oplID);
    
    List<OplAction> oplActionList = oplActionService.getOplActionByOplId(oplID);
    if(oplActionList!=null && oplActionList.size()!=0){
        jsonData.put("oplActionList", oplActionList);
        List<List<Fileinfo>> fileinforList = new ArrayList<List<Fileinfo>>();
        for(OplAction oplAction : oplActionList){
            List<Fileinfo> fs1 = new ArrayList<Fileinfo>();
            List<Fileinfo> fs2 = fileInfoService.findFilesByOplActionIdAndFileType(oplAction.getId(), Nomalconstant.QADETAIL_FILETYPE_SIGNERNATE);
            if(fs2!=null && fs2.size()!=0){
                fs1 = fs2;
            }
            fileinforList.add(fs1);
        }
        jsonData.put("fileinforList", fileinforList);
        if(opl.getQaReview()!=null){
            String result=opl.getQaReview().getStatus();
            if(result == null){
                result="N";
            }
            jsonData.put("reviewResult", result);
        }
        //需要更换成struts2的流形式下载
        //String url = getWeblogicRoot() + "upload" + File.separator + "OplActionFile"+File.separator;
        String url = request.getContextPath()+ File.separator+ "upload" + File.separator + "OplActionFile"+File.separator;
        jsonData.put("url", url);
    }
    return "json";
}

可以从以上的代码看到返回的是json格式的


现在分析前端页面中的ajax

function showAct(id){
        $(‘#actTb‘).html("");
        $("#mask").show();
        $("#oplActionCeng").show();
        $.ajax({
            url:‘${ctx}/manager/getOplActionByOplID.do?oplID=‘+id,
            type:‘post‘,
            cache:false,
            success:function(jsonList){
                var oplActionList = jsonList.oplActionList;
                var fileinforList = jsonList.fileinforList;
                var content = " <table class=‘normalTb‘ style=‘text-align: center;word-break:break-all;margin-top: 5px;width: 98.5%;‘>"+
                                    "<tr style=‘font-weight: bold;‘>";
                               content+="<td width=‘12%‘ class=‘LightBlueTF2‘ height=‘25‘>措施(measures)</td>"+
                                        "<td width=‘15%‘ class=‘LightBlueTF2‘>责任人(resper)</td>"+
                                        "<td width=‘20%‘ class=‘LightBlueTF2‘>计划时间(planDate)</td>"+
                                        "<td width=‘15%‘ class=‘LightBlueTF2‘>状态(status)</td>";
                               //if(imporcreate==1)
                               content+="<td width=‘30%‘ class=‘LightBlueTF2‘>证据文件链接(evidence)</td>";
                            content+="</tr>";
                for(var i=0;i<oplActionList.length;i++){
                    var oplAction = oplActionList[i];
                    ynFile = 1;
                    if(fileinforList[i]==null || fileinforList[i].length==0)ynFile=0;
                    content+="<tr>";
                    measure = oplAction.measure;
                    if(measure==null || measure==‘‘)measure="NA";
                    content+="<td height=‘25‘><span class=‘lengthdiv140‘ title=‘"+measure+"‘>"+measure+"</td>"+
                             "<td><span class=‘lengthdiv125‘ title=‘"+oplAction.resper.dept3+"/"+oplAction.resper.loginName+"‘>"+oplAction.resper.dept3+"/"+oplAction.resper.loginName+"</span></td>"+
                             "<td>"+oplAction.planEndDate+"</td><td>";
                    if(oplAction.status==0){
                        content+="not closed</td>";
                    }else{
                        content+="closed</td>";
                    }
                        content+="<td align=‘left‘ style=‘background: #ffffff;padding-left: 5px;‘>";
                        if(fileinforList[i]==null || fileinforList[i].length==0)content+="<div align=‘center‘>NA</div>";
                        for(var y=0;y<fileinforList[i].length;y++){
                            var bold = "normal";
                            if(y==0)bold = "bold";
                            var fileInfo = fileinforList[i][y];
                            var fname = fileInfo.filename;
                            if(fname.length>20){
                                fname = fname.substring(0,19);
                                fname+="...";
                            }
                            content+="<a title=‘"+fileInfo.filename+"‘ class=‘acss‘ style=‘color:#15428B;font-weight: "+bold+";‘ onclick=\"downFile(‘"+fileInfo.ucmContentId+"‘,‘"+fileInfo.filename+"‘,‘OplActionFile‘);\"><img title=‘下载证据文件‘ src=‘"+ctx+"/style/images/QAImg/xia2.gif‘ width=‘16‘ height=‘16‘/><u>"+(y+1)+"."+fname+"</u></a>";
                            if(y!=fileinforList[i].length-1)content+="<br/>";
                        }
                    content+="</td>";        
                    content+="</tr>";         
                }
                content+="</table>";
                $(‘#actTb‘).html(content);
            }
        });
    }
    
    var posX;
    var posY; 
    thid = "#oplActionCeng";
    document.getElementById("theCeng1").onmousedown=function(e){
        if(!e) e = window.event;  //IE
        posX = e.clientX - parseInt($(thid).css("left"));
        posY = e.clientY - parseInt($(thid).css("top"));
        document.onmousemove = mousemove;           
    };

你可以看到其实Ajax获取动态的数据其实就是通过url连接到后台的config配置文件然后到对应的方法返回json格式的值

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/4877

ajax提交 使用css 控制按钮防止重复点击

有时候遇到ajax提交数据时 多点几次会出现重复点击的情况.所以下面介绍一个用css控制防重复点击的效果,submitting 是一个类 没有任何意思,也可以写成变灰度的效果

ajax延时请求问题

在做实时搜索时,给input标签设置input propertychange监听,然后进行实时请求,如果在监听事件里面直接进行请求,就会导致每一次输入的变化都会进行请求,但是有时候搜索词可能比较长,并不希望前面每次的变化都进行请求

Ajax跨域CORS

在Ajax2.0中多了CORS允许我们跨域,但是其中有着几种的限制:Origin、Methods、Headers、Credentials;Origin当浏览器用Ajax跨域请求的时候,会带上一个请求头“Origin: 协议://页面域名”,

$.ajax防止多次点击重复提交的方法

第一种:使用$.ajaxPrefilter( [dataTypes], handler(options, originalOptions, jqXHR) ) 方法;第二种:使用beforeSend选项,在发送请求前将提交按钮变为不可用的状态;

Ajax 解决浏览器的缓存问题

ajax能提高页面载入的速度主要的原因是通过ajax减少了重复数据的载入,也就是说在载入数据的同时将数据缓存到内存中,一旦数据被加载其中,只要我们没有刷新页面,这些数据就会一直被缓存在内存中,当我们提交 的URL与历史的URL一致时

模仿jquery封装ajax功能

因为有时候想提高性能,只需要一个ajax函数,不想引入较大的jq文件,尝试过axios,可是get方法不支持多层嵌套的json,post方式后台接收方式似乎要变。。也许是我不太会用吧。。其实换个方式接收也没什么,只是习惯了JQ序列化参数

ajax请求 get与post的区别?_get和post的使用场景

使用Ajax时,采用Get或者Post方式请求服务器,那么它们的区别有哪些呢?相比post,get请求参数跟在url后面,提交数据的长度长度有限制,而且会被浏览器缓存起来,存在一定的安全问题。

纯Js实现ajax

这是一个纯js向后台进行post请求的前端实现,未考虑考虑的问题。创建对象,并兼容各种浏览器;请求数据,这里写了两种方法,方法一最开始写的,但是后来发现灵活性不够

js 判断异步执行完成方法总汇,比如多个ajax执行完毕后执行其他方法

在多个异步操作中,由于不确定异步操作的执行顺序,如何判断异步操作在已经执行完成的情况下,再执行一个新的操作,有哪些方法可以实现?

解决ajax跨域访问sessionid不一致问题

根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求服务器就会以为是一个新的人

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!