用ajax写onclick作品绑定事件(全过程)

时间:2024-11-19 07:52:46
//如何将作品简介绑定在作品(图片)上,当点击变换图片时出现对应作品简介信息
//本次mysql中活动表为bsh_show_activity ,作品信息表为bsh_show_work_info,要求查出指定活动id下的所有作品信息
/**本文章采用了FreeMarker前端工具编写网页,采用框架Mybatis+springMvc+jquery,采用数据库mysql
*在使用FreeMarker中可以引入css文件和js文件,网页格式尽量不在ftl中直接编写,建议另建一个css文件编写其格式
*,然后再引入到ftl中,这是比较规范的写法。
*/






//ftl中作品简介div,作品div
<div ></div>
<div class="author"></div>


//在ftl中作品div中添加onclick事件
<div οnclick="getWorksId" ></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:()+"/showIndex/",
data:{
worksId :worksId
},
success : function(data){
var worksMap = ;
var objHtml ='';
objHtml +='<div class="xxx">作品简介</div>';
objHtml +='<div><span>单位&nbsp;:</span><i>'++'</i></div>';
objHtml +='<div><span>作者&nbsp;:</span><i>'++'</i></div>';
objHtml +='<div><span>作品简介&nbsp;:</span><i>'++'</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 =(request);
("success",true);
("worksMap",("worksMap"));
}catch(Exception e)
{
("获取当前活动作品异常",e);
("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 =("worksId");
//参数列表
Map<String,Object>params =new HashMap<String,Object>();
//存放参数
("worksId",worksId);
//获取作品简介
Map<String,Object> worksMap =(params);
//返回map集合
Map<String,Object>resultMap =new HashMap<String,Object>();
("worksMap",worksMap);
result resultMap;
}
//引用dao层接口
@Resource
ShowMapper showMapper;


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


//最后编写sql语句,
<mapper namespace="">
<select parameterType=""  resultType="">
SELECT 
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 =b.work_info_id AND =#{}
</select>
</mapper>