考考你的页面跳转

             这几天项目中遇到了一个页面跳转问题，这又是由传值问题引起的……好吧，先介绍背景(＞﹏＜)。

     要实现这样一个功能：我要最终跳到一个综合查询页面，有以下四种途径：在首页上方的搜索框输入姓名，跳入该页面并查出这个人的相关信息；在首页导航栏点击一级/二级领域跳入该页面并查询出该领域内人员的相关信息；直接点击页面链接，跳入该查询页。

     显而易见，最后一种途径最简单，也不是今天的谈资~

     通过一级/二级领域查询，需要带领域id过去，我通过Restful方式传过去的，通过a链接就搞定了，连路径带id，一套带走~  

     代码如下：

     

<a href="/itoo-jrkj-teacher-web/findTeacherByTwoLevelField/${listFieldVos.firstfieldId}/${listFieldVos.firstfieldId}"><input type="hidden"
										id="firstFieldId" value="${listFieldVos.firstfieldId}" />${listFieldVos.fieldName}</a>

                可以看到，这两个id直接从后台传过来了，无需其他任何js方法介入。

     最后这个搜索框查询遇到了问题，主要点在参数怎么带过去的问题：

     开始我是这么写的：代码 V1.0

     首页jsp:

<a href="/itoo-jrkj-teacher-web/findTeacherByNames" class="change" οnclick="saveStrName()"><i class="icon-search"></i></a>

            通过Ajax传参数：

<span style="white-space:pre">	</span>function saveStrName() {
		var strName = document.getElementById('searchcontent').value;
		// 请求参数
		$.ajax({
			type : 'get',
			async:false,
			url : '/itoo-jrkj-teacher-web/findTeacherByNames?strName='+strName,//url方式传参数
			data : {
			},
			success : function() { 
			}
		});
	}

             Controller接收：

<span style="white-space:pre">	</span>/**
	 * 寻找讲师-根据姓名或昵称--（2016年1月25日14:19:40）
	 * @throws UnsupportedEncodingException 
	 */
	@RequestMapping(value = "/findTeacherByNames",method=RequestMethod.GET) 
	public String findTeacherByNames(@RequestParam("strName")String strName,Model model,
			HttpServletResponse response,HttpServletRequest request){
		model.addAttribute("strName", strName);
		// 查询全部行业
		List<Industry> industry = new ArrayList<Industry>();
		industry = teacherBean.findAllIndustry(dataBaseName);
		model.addAttribute("allIndustry", industry);
		
		String provinceId =findProvinceIdByName();
		model.addAttribute("provinceId", provinceId);
		
		return "findLecturer";
	}

           整体分析：首先，这样赤裸裸的通过get方法从js向Controller传中文会乱码，没有处理；（注：post不会乱码）

     其次，我预测的执行顺序是：先href链接，到Controller页面；然后执行js，也到Controller页面，这样路径和参数一起到，保证了执行顺利。但是！！！这一切都建立在美好的预测和想象之中。

     实际执行中，Controller会执行两次，加载完页面后执行搜索页window.onload的Ajax方法，这个Ajax中含有再次执行此方法的url，同时，页面也无法显示。

     

     修改后 V2.0：

     首页jsp（不变）:

<a href="/itoo-jrkj-teacher-web/findTeacherByNames" class="change" οnclick="saveStrName()"><i class="icon-search"></i></a>

     通过Ajax传参数（添加了success里的页面跳转方法，进行了搜索内容编码）：

<span style="white-space:pre">	</span>function saveStrName() {
		var strName = document.getElementById('searchcontent').value;
		var strName1=encodeURI(encodeURI(strName));
		// 请求参数
		$.ajax({
			type : 'get',
			async:false,
			url : '/itoo-jrkj-teacher-web/findTeacherByNames?strName='+strName,
			data : {
			},
			success : function() { 
				self.location = '/itoo-jrkj-teacher-web/findTeacherByNames';
			}
		});
	}

                Controller接收：

/**
<span style="white-space:pre">	</span> * 寻找讲师-根据姓名或昵称--（ 2016年1月25日14:19:40）
<span style="white-space:pre">	</span> * @throws UnsupportedEncodingException 
<span style="white-space:pre">	</span> */
<span style="white-space:pre">	</span>@RequestMapping(value = "/findTeacherByNames",method=RequestMethod.GET) 
<span style="white-space:pre">	</span>public String findTeacherByNames(String strName,Model model,
<span style="white-space:pre">			</span>HttpServletResponse response,HttpServletRequest request){
<span style="white-space:pre">		</span>String strName1=request.getParameter("strName");
<span style="white-space:pre">		</span>try {
<span style="white-space:pre">			</span>strName = URLDecoder.decode(strName1,"utf-8");
<span style="white-space:pre">		</span>} catch (UnsupportedEncodingException e) {
<span style="white-space:pre">			</span>e.printStackTrace();
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>HttpSession session = request.getSession();
<span style="white-space:pre">		</span>session.setAttribute("strName", strName);
<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>model.addAttribute("strName", strName);
<span style="white-space:pre">		</span>// 查询全部行业
<span style="white-space:pre">		</span>List<Industry> industry = new ArrayList<Industry>();
<span style="white-space:pre">		</span>industry = teacherBean.findAllIndustry(dataBaseName);
<span style="white-space:pre">		</span>model.addAttribute("allIndustry", industry);
<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>String provinceId =findProvinceIdByName();
<span style="white-space:pre">		</span>model.addAttribute("provinceId", provinceId);
<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>return "findLecturer";
<span style="white-space:pre">	</span>}

               整体分析：这段代码的Controller会执行三次，并且页面仍无法显示。因为：href到页面执行一次；Ajax执行success后执行一；条件查询页面本身还有一个Ajax，会再次返回到这个Controller(这个没贴出来，是因为开始思路有问题，很快删了这段，就不让它捣乱了~)。

           其实思路问题还是没解决，到底是不是像想象的那样，先执行href，再Ajax，然后Ajax的success？是不是页面跳转和参数会同时到达Controller？还是怎么写都无关紧要，只要它们到了Controller就可以？

         

           修改后3.0

           jsp页面（去掉了href跳转）：

<a href="javascript:;" class="change" οnclick="saveStrName()" ><i class="icon-search"></i></a>

               通过Ajax传参数（传递两次参数）：

	function saveStrName() {
		var strName = document.getElementById('searchcontent').value;
		var strName1=encodeURI(encodeURI(strName));
		// 请求参数
		$.ajax({
			type : 'get',
			async:false,
			url : '/itoo-jrkj-teacher-web/findTeacherByNames?strName='+strName1,
			data : {
				"strName":strName1
			},
			success : function() { 
 		        self.location = '/itoo-jrkj-teacher-web/findTeacherByNames?strName='+strName1;
			}
		});
	}

                   Controller接收：

/**
	 * 寻找讲师-根据姓名或昵称--（杨建 2016年1月25日14:19:40）
	 * @throws UnsupportedEncodingException 
	 */
	@RequestMapping(value = "/findTeacherByNames",method=RequestMethod.GET) 
	public String findTeacherByNames(String strName,Model model,
			HttpServletResponse response,HttpServletRequest request){
		String strName1=request.getParameter("strName");
		try {
			strName = URLDecoder.decode(strName1,"utf-8");
		} catch (UnsupportedEncodingException e) {
			e.printStackTrace();
		}
		HttpSession session = request.getSession();
		session.setAttribute("strName", strName);
		
		model.addAttribute("strName", strName);
		// 查询全部行业
		List<Industry> industry = new ArrayList<Industry>();
		industry = teacherBean.findAllIndustry(dataBaseName);
		model.addAttribute("allIndustry", industry);
		
		String provinceId =findProvinceIdByName();
		model.addAttribute("provinceId", provinceId);
		
		return "findLecturer";
	}

                       这次就成功了，因为这次通过url和页面跳转传了两次参数，保证Controller能顺利接收到；同时，最主要的是这次做了执行顺序测试，怎么测试的就不详述了，说一下结果：

       在a标签href和Ajax跳转同时存在时，先执行Ajax，传递url参数；之后success，页面跳转，最后执行href。

理清这个思路后，问题也就迎刃而解了。

       

       总结：解决问题的关键是分析问题，把问题分析好了再下手就如庖丁解牛，轻而易举。不要靠乱猜乱撞，遇事先求百度、Google，不行了自己动手实验，这样会效率更高。