Spring MVC 与 Ajax

Spring Json View项目为Spring MVC扩展了Ajax功能

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"}]}

评论

1 楼 xiaguobing 2012-06-20  

哥，好人做到底呗。求包啊！呵呵