其实我理解前端如何通过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格式的值
什么是ajax?Ajax包含下列技术,为什么要用ajax?Ajax应用程序的优势在于?Ajax的最大的特点是什么?请介绍一下XMLHTTPREQUEST对象?Ajax技术体系的组成部分有哪些?AJAX应用和传统Web应用有什么不同...
使用vue开发过程中,通过使用{{}}或者v-text=的形式进行数据绑定,如果数据是通过服务器异步获取的。在控制台我们会发现报这样的错误:Uncaught TypeError: Cannot read property name of null。通过v-if或者空对象来解决
在多个异步操作中,由于不确定异步操作的执行顺序,如何判断异步操作在已经执行完成的情况下,再执行一个新的操作,有哪些方法可以实现?
前端选择文件上传的两种方式:对话框选择方式上传、拖拽选择方式上传;如何上传获取到的文件?使用AJAX即可通过表单方式上传文件。
使用Ajax时,采用Get或者Post方式请求服务器,那么它们的区别有哪些呢?相比post,get请求参数跟在url后面,提交数据的长度长度有限制,而且会被浏览器缓存起来,存在一定的安全问题。
IE浏览器对于同一个URL只返回相同结果。因为,在默认情况下,IE会缓存ajax的请求结果。对于同一个URL地址,在缓存过期之前,只有第一次请求会真正发送到服务端。大多数情况下,我们使用ajax是希望实现局部刷新的
后台的处理时间比较长,根据合同的多少可能等待时间比较长,会达到10s左右,这个时候如果不加任何的提示,会导致用户因为没有看到是否执行而导致重复的操作,为了增加用户的体验感,以及项目的完善性,这个时候就需要增加一个等待页面进行提示。
根据浏览器的保护规则,跨域的时候我们创建的sessionId是不会被浏览器保存下来的,这样,当我们在进行跨域访问的时候,我们的sessionId就不会被保存下来,也就是说,每一次的请求服务器就会以为是一个新的人
ajax提交数据很多的时候报错,web后端没有接收到数据解决方案:经查为tomcat默认限制post提交2M数据。这里需要修改tomcat中大配置文件server.xml文件
ajax异步的js和XML:以前更多的是使用XML的数据格式,现在数据格式更多的是json.;ajax的优势:单页面应用(SPA)无刷新更新数据(局部刷新);异步与服务器通信
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!