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);


}