用ajax寫onclick作品綁定事件（全過程）

//如何將作品簡介綁定在作品（圖片）上，當點擊變換圖片時出現對應作品簡介信息
//本次mysql中活動表爲bsh_show_activity ,作品信息表爲bsh_show_work_info,要求查出指定活動id下的所有作品信息
/**本文章採用了FreeMarker前端工具編寫網頁，採用框架Mybatis+springMvc+jquery,採用數據庫mysql
*在使用FreeMarker中可以引入css文件和js文件,網頁格式儘量不在ftl中直接編寫，建議另建一個css文件編寫其格式
*，然後再引入到ftl中，這是比較規範的寫法。
*/






//ftl中作品簡介div,作品div
<div id="ThumbPic"></div>
<div class="author"></div>


//在ftl中作品div中添加onclick事件
<div οnclick="getWorksId" id="ThumbPic"></div>
//js中寫getWorksId方法
//獲取作品id
var worksId =$("#worksId").val();
//獲取作品作者
var workAuthor =$("#workAuthor").val();
//獲取作品單位
var workUnit =$("#workUnit").val();
//獲取作品簡介
var worksIntroduction =$("#worksIntroduction").val();
function getWorksId(worksId){
$.ajax({
type:"post",
dataType:"json",
url:jQuery.getBasePath()+"/showIndex/getWorksInfoById.bsh",
data:{
worksId :worksId
},
success : function(data){
var worksMap = data.worksMap;
var objHtml ='';
objHtml +='<div class="xxx">作品簡介</div>';
objHtml +='<div><span>單位&nbsp;:</span><i>'+worksMap.workUnit+'</i></div>';
objHtml +='<div><span>作者&nbsp;:</span><i>'+worksMap.workAuthor+'</i></div>';
objHtml +='<div><span>作品簡介&nbsp;:</span><i>'+worksMap.worksIntroduction+'</i></div>';
$(".author").html();
//小心得
/**
*$,#,.,"#"的含義？
*$（）指el表達式,代表輸出（）裏面的值
*$("#author")中#表示選擇器選擇id爲author的元素
*$("#")表示選擇器選擇帶有id的所以元素
*$(".author")表示選擇器選擇class名爲author的元素
**/
}
});
}




//js中涉及到的方法getWorksInfoById沒有定義，下面寫這個方法
//編寫控制層controller
public Interface xxx{
public JSONObject getWorksInfoById(HttpServletRequest request){
JSONObject json =new JSONObject();
try{
Map<String,Object>resultMap =showServiceI.getWorksInfoById(request);
json.put("success",true);
json.put("worksMap",resultMap.get("worksMap"));
}catch(Exception e)
{
logger.error("獲取當前活動作品異常",e);
json.put("success",false);
json("msg","獲取當前活動的所有作品異常!");
}
return json;
}
//引用serivceI接口
@Resource
ShowServiceI showServiceI;
}


//在service層下定義方法,接口取名ShowServiceI
//在定義一個方法的時候，先理清這個方法的參數類型parameterType
public Map<String,Object> getWorksInfoById (HttpServletRequest request);


//然後寫方法的具體實現，即serviceImpl實現層
public class  xxx{
public Map<String,Object>getWorksInfoById (HttpServletRequest request){
//獲取活動的id
String worksId =request.getParameter("worksId");
//參數列表
Map<String,Object>params =new HashMap<String,Object>();
//存放參數
params.put("worksId",worksId);
//獲取作品簡介
Map<String,Object> worksMap =showMapper.getWorksInfoById(params);
//返回map集合
Map<String,Object>resultMap =new HashMap<String,Object>();
resultMap.put("worksMap",worksMap);
result resultMap;
}
//引用dao層接口
@Resource
ShowMapper showMapper;


}
//編寫Dao接口
Map<String,Object>getWorksInfoById (Map<String,Object>params);


//最後編寫sql語句,ShowMapper.xml
<mapper namespace="xxx.dao.xxx.ShowMapper">
<select id="getWorksInfoById" parameterType="java.util.Map"  resultType="java.util.Map">
SELECT 
a.id as worksId,
a.work_Unit as workUnit,
a.work_anthor as workAuthor,
a.work_Introduction as worksIntroduction,
b.work_info_id as workInfoId
FROM bsh_show_work_info a, bsh_show_activity b
WHERE a.id=b.work_info_id AND a.id=#{parameter.worksId}
</select>
</mapper>