需求: 使用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; }