这几天项目中遇到了一个页面跳转问题,这又是由传值问题引起的……好吧,先介绍背景(>﹏<)。
要实现这样一个功能:我要最终跳到一个综合查询页面,有以下四种途径:在首页上方的搜索框输入姓名,跳入该页面并查出这个人的相关信息;在首页导航栏点击一级/二级领域跳入该页面并查询出该领域内人员的相关信息;直接点击页面链接,跳入该查询页。
显而易见,最后一种途径最简单,也不是今天的谈资~
通过一级/二级领域查询,需要带领域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,不行了自己动手实验,这样会效率更高。