ajax实例：如何使用json+ajax的方法实现类似前端特效tab切换效果

需求：  使用json+ajax的方法代替类似tab功能的效果，传统的tab需要从数据表一次性读取多条数据并全部置于页面上，而json+ajax 通过ajax访问后台方法可实时获取数据单条。最近实现了json+ajax 获取数据并改变页面内容的方法，感觉用到的东西还挺多便记录一下。

首先是html框架，想要通过点击不同的链接而在同个页面上改变div上的项目名和负责人的值（如原值为”空“），那么，为a链接添加点击的方法changePro()并传入id

<ul id="tab_ul">
<li><a href="javascript:changePro('id1')">1</a></li>
<li><a href="javascript:changePro('id2')">2</a></li>
<li><a href="javascript:changePro('id3')">3</a></li>
<li><a href="javascript:changePro('id4')">4</a></li>
</ul>
<div class="title-detail">
<dl>
<dt>项目名：</dt>
<dd id="proName">空</dd>
</dl>
<dl>
<dt>负责人：</dt>
<dd id="proManager">空</dd>
</dl>
</div>

接着，是changePro()方法，首先所需要的还是引入jq插件，

<script type="text/javascript">
function changePro(id){
var url = "";//访问返回ajax类型的方法链接地址
$.ajax({
type : 'POST',
url : url,
data :{ampId:id},
dataType : 'json',
success : function (result) {
if(result.success){
$("#proName").html(result.data.proName);
$("#proManager").html(result.data.proManager);
}
}
});
}
</script>

下面是返回ajax数据方法，上面的url就是链接到这个方法里

public String getAnotherPro() throws Exception {
AjaxResult ajaxResult = new AjaxResult();
HttpServletRequest request = this.getRequest();
String id = request.getParameter("ampId");
try{
Map map = new HashMap();
map.put("proManager","项目负责人"+id);
map.put("proName", "项目名称"+id);
ajaxResult.setData(map);
ajaxResult.setInfo("查询成功");
ajaxResult.setSuccess(true);
} catch (Exception e) {
e.printStackTrace();
ajaxResult.setInfo("查询失败");
ajaxResult.setSuccess(false);
}
JsonUtil.outJson(ajaxResult, getResponse());
return null;
}