SpringMVC与Ajax交互

1 springmvc和ajax的交互

1.1  请求字符串响应json

客户端发送的数据:key=value&key1=value1

响应回来:json

1.1.1json的支持jar包

1.1.2建立Handler处理器

 package org.guangsoft.controller;

 import java.util.ArrayList;
 import java.util.List;

 import org.guangsoft.pojo.User;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.ResponseBody;

 @Controller
 public class UserHandler
 {
     //responseBody将返回值转化为json格式响应到客户端
     //requestBody将请求数据转化为json对象
     @RequestMapping("/checkUsername")
     public @ResponseBody List<User> CheckUsername(User user)
     {
         System.out.println(user.getUsername());
         List<User> userList = new ArrayList<User>();
         User user0 = new User();
         user0.setUsername("java");
         User user1 = new User();
         user1.setUsername("javase");
         User user2 = new User();
         user2.setUsername("javaee");
         //对象加入集合
         userList.add(user0);
         userList.add(user1);
         userList.add(user2);
         return userList;
     }

     @RequestMapping("/checkUsername2")
     public @ResponseBody List<User> CheckUsername2(@RequestBody User user)
     {
         System.out.println(user.getUsername());
         List<User> userList = new ArrayList<User>();
         User user0 = new User();
         user0.setUsername("java");
         User user1 = new User();
         user1.setUsername("javase");
         User user2 = new User();
         user2.setUsername("javaee");
         //对象加入集合
         userList.add(user0);
         userList.add(user1);
         userList.add(user2);
         return userList;
     }
 } 

1.1.3完成ajax发送请求

备注：springmvc ajax，响应json406错误，使用json相关jar包2.4以上版本。

 function sendAjax()
 {
     var username = $("#username").val();
     var age = $("#age").val();
     var div = $("#showDiv");
     $.ajax(
     {
         url:"checkUsername.action",
         data:{"username":username,"age":age},
         type:"post",
         dataType:"json",
         success:function(data)
         {
             var jsons = data;
             div.html("");
             for(var i = 0; i < jsons.length; i++)
             {
                 div.append("<div>"+jsons[i].username+"</div>");
             }
         }
     });
 } 

1.2请求json响应json

客户端发送的数据：{key：value,key1:value1}

响应回来:json

1.2.1 建立服务器端Handler

见上

1.2.2客户端发生ajax请求

 function sendAjax2()
 {
     var username = $("#username").val();
     var age = $("#age").val();
     var div = $("#showDiv");
     $.ajax(
     {
         url:"checkUsername2.action",
         type:"post",
         data:'{"username":"username","age":"4"}',
         contentType:"application/json;charset=utf-8",
         dataType:"json",
         success:function(data)
         {
             var jsons = data;
             div.html("");
             for(var i = 0; i < jsons.length; i++)
             {
                 div.append("<div>"+jsons[i].username+"</div>");
             }
         }
     });
 }

2url跳转

Model封装数据的范围request范围，只有请求转发才能获取

如果是重定向变为url传参。

Return “forward:url”：请求转发

Return “redirect:url”重定向