用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>