[b]Spring Json View项目为Spring MVC扩展了Ajax功能[/b]
1.将spring-json.jar和sojo.jar文件放入类路径;
2.为spring mvc 配置支持Ajax的视图解析器:
为什么是两个?一个给jsp用,另一个给需要将返回的model转换成Json字符串的Ajax视图用.
3.像为jsp编写控制器那样,该怎么写还怎么写:
4.jsp 文件中引用的js文件如下:
Js程序调用hello.htm返回结果如下(控制器所返回的Json格式的模型map):
{"username":"张三","users":[{"username":"root","password":"spk321","userId":"43","roleId":"33"},{"username":"Spongebob","password":"hmbb123","userId":"44","roleId":"33"}]}
1.将spring-json.jar和sojo.jar文件放入类路径;
2.为spring mvc 配置支持Ajax的视图解析器:
<!-- View Resolver -->
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass">
<value>org.springframework.web.servlet.view.JstlView</value>
</property>
<property name="prefix">
<value>/WEB-INF/jsp/</value>
</property>
<property name="suffix">
<value>.jsp</value>
</property>
</bean>
<bean name="xmlViewResolver" class="org.springframework.web.servlet.view.XmlViewResolver" >
<property name="order" value="1"/>
</bean>
为什么是两个?一个给jsp用,另一个给需要将返回的model转换成Json字符串的Ajax视图用.
3.像为jsp编写控制器那样,该怎么写还怎么写:
public class SimpleJsonGetController implements Controller {
private ProfileService profileService;
public void setProfileService(ProfileService profileService) {
this.profileService = profileService;
}
@Override
public ModelAndView handleRequest(HttpServletRequest arg0,
HttpServletResponse arg1) throws Exception {
String roleId=(arg0.getParameter("roleId")!= null)?arg0.getParameter("roleId"):"1";
List select2=profileService.getRemainedTopicsByRole(Integer.parseInt(roleId));
List select3=profileService.getTopicsByRole(Integer.parseInt(roleId));
HashMap map=new HashMap();
map.put("select2", select2);
map.put("select3", select3);
//map->json的转换是自动的
return new ModelAndView("hello",map);
}
4.jsp 文件中引用的js文件如下:
$(document).ready(function(){
//jQuery test
$("a").click(function(event){
alert("as you can see, the link no longer took you to jquery.com");
event.preventDefault();
});
//button test
$('#getName').click(function(){
$.getJSON('hello.htm', function(data) {
$('#username').html( data.username );
$('#selectfrom').empty();
var users = data.users;
$.each(users,function(index,value){
$("#selectfrom")[0].options.add(new Option(value.username,value.userId,false,false));
});
});
});
$('#select1').change(function() {
var rid=$('#select1').val();
$.getJSON('hello.htm?roleId='+rid, function(data) {
$('#select2').empty();
$('#select3').empty();
var select2 = data.select2;
var select3 = data.select3;
$.each(select2,function(index,value){
$("#select2")[0].options.add(new Option(value.topicName,value.topicId,false,false));
});
$.each(select3,function(index,value){
$("#select3")[0].options.add(new Option(value.topicName,value.topicId,false,false));
});
});
});
//button click event
$('#authorize').click(function(){
$.post("profile.htm", $("#form1").serialize());
alert("OK");
});
});
Js程序调用hello.htm返回结果如下(控制器所返回的Json格式的模型map):
{"username":"张三","users":[{"username":"root","password":"spk321","userId":"43","roleId":"33"},{"username":"Spongebob","password":"hmbb123","userId":"44","roleId":"33"}]}