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

本文链接：https://blog.csdn.net/qq_32709167/article/details/78457806

需求：使用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.attributes.proName);
						$("#proManager").html(result.attributes.proManager);
					}
		        }
		    });
	}
</script>

下面是返回ajax数据方法，上面的url就是链接到这个方法里，AjaxJson参考java后台访问外网接口获取数据并封装成json

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