ajax回调函数运用(由前端到后端代码全过程)

//ajax回调函数
function initActivityWorks(){
var backFun = function(jsonObject){
if(!jsonObject.success){
showSuccessOrErrorModel("获取信息错误，请联系管理员！","error");
return;
               }
//初始化信息
initActivityWorksList(jsonObject);
};
//调用jquery帮助类（引用JqueryHelper.js）
var demoUrl=jQuery.getBasePath  : "/showIndex/getActivityWorksList.bsh";
JqueryHelper.ajaxCon(demoUrl,{activityId:activityId},backFun);
}


//调用的JqueryHelper.js
var JqueryHelp = funtion() {
jqueryHelper.ajaxCon =function(url,para,sus){
$.ajax({
url :url,
dataType :'json',
type : "post",
data : para,
timeout : 30000,
success : function(set,status){
sus(set,status);
},
erroe : function(){
if（!window.console）{
//window.console web API 接口用于控制台调试，例如调用里面的方法console.log()
window.console ={log: function(){}};
}
console.log("[readyState]:"+xhr.readyState);
console.log("[xhrStatus]:"+xhr.status);
console.log("[status]:"+status);
console.log("[error]:"+error);
 }
});
      };




//在controller中编写getActivityWorksList方法


@RequestMapping("/getActivityWorksList.bsh")
@ResponseBody
public JSONObject getActivityWorksList (HttpServletRequest request){
JSONObject json  = new JSONObject();
try
{
Map<String,Object>resultMap =showService.getActivityWorksList(request);
json.put("success",true);
json.put("activityWorksList",resultMap.get("activityWorksList"));

}catch(Exception e){
logger.error("[获取当前活动的所有作品异常!-ErrorMsg:]",e);
json.put("success",false);
json.put("msg", "获取当前活动的所有作品异常!");
}
return json;
}




//写完控制层，再写业务层serviceI接口,添加相应的方法
public Map<String,Object>getActivityWorksList(HttpServletRequest request);
//接着写业务实现层 serviceImpl，写方法的具体实现
public class ShowServiceImpl implements ShowService{
public Map<String,Object>getActivityWorksList(HttpServletRequest request){
//获取活动的id
String activityId =request.getParameter("activityId");
//参数列表(这里的参数类型parameterType与Mapper.xml中的一致)
Map<String,Object>params =new HashMap<String,Object>();
//存放参数
params.put("activityId",activityId);
//获取资源信息
List<Map<String,Object>>activityWorksList =showMapper.getActivityWorksList(params);
//返回的map(这里返回的结果集类型resultType与Mapper.xml中的一致)
Map<String,Object>resultMap =new HashMap<String,Object>();
resultMap.put("activityWorksList",activityWorksList);
return resultMap;
}
//dao层的接口
@Resource
private ShowMapper showMapper;
}


//写完controller，serviceI，serviceImpl，接着就到了dao层，取名ShowMapper
List<Map<String,Object>>getActivityWorksList(Map<String,Object>params);
//List中包Map解释
/**Map中存放的是key,value键值对，key为String类型，value为Object类型，list集合中存放的
*是单个元素，将Map中的键值对当作一个元素存放到list集合中，方便存取。*/


//接着写sql语句查询数据库，取名ShowMapper.xml(这里的文件名和dao层中的一致)
<mapper namespace="xxx.ShowMapper">
<select id="" parameterType="java.xxx" resultType="java.xxx">
//这里的resultType也可有resultMap来代替
SELECT XXX FROM 表名 WHERE 条件
</select>
</mapper>


/**小知识之myBatis传参parameterType类型
*myBatis的传参类型分为两种：
*1.基本数据类型：int,string,long,Date
*2.复杂数据类型：类和Map
*如何获取参数中的值
*1.基本数据类型：#{参数}获取参数中的值
*2复杂数据类型：#{属性名},map中则是#{key}
*/


//接着写js，通过拼接html方法从数据库中获取数据
function initActivityWorksLiist(jsonObject){
//上方在写回调函数的时候先定义了一个初始化initActivityWorksList方法，这里给予具体实现
var list =jsonObject.activityWorksList;
var objHtml ='';
if(list.length>0){
$("#编写网页中class下的id名").empty();
for(var i=0;i<list.length;i++)
{
var map=list[i];
objHtml +='<p class="Hidden">';
objHtml +='<span class="xxx"><img src="'+map.id名+'" /></span>';
objHtml +='</p>';
}
$("#id名").html(objHtml);


}