Spring Mvc模式下Jquery Ajax 与后台交互操作

1.基本代码

1)后台控制器基本代码

@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;//服务

    @ResponseBody
    @RequestMapping(value="/getUser/*访问路径自己设置*/", method = RequestMethod.POST)
     public Object getUser(@RequestBody User user){

     User resUser = new User();
     resUser  = userService.getUsers(user.getUserId());//根据userId查询用户

     return resUser;
    }

}

 

 

 

2）User类代码

 

public class User {
    private String userName;
    private String userId;
    private String userPassword;

    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getUserId() {
        return userId;
    }
    public void setUserId(String userId) {
        this.userId = userId;
    }
    public String getUserPassword() {
        return userPassword;
    }
    public void setUserPassword(String userPassword) {
        this.userPassword = userPassword;
    }
}

 

 

 

3）前台js中Jquery Ajax使用代码

      

  var params = {
               userId : "12"//userId 应与User类中属性名一致 12为传回去的查询值，可以通过输入框获取值传入
            };
        $.ajax({
            type : "post",
            url : getRootPath() + "/user/getUser",//访问路径
            dataType : "json",
            contentType : "application/json",
            data : JSON.stringify(params),
            timeout : commonTimeOut,
            error : queryUsersError,
            global : false,
            success : queryUsersSuccess,//查询成功处理函数
        });

//查询成功处理函数

function queryUsersSuccess(result) {
        // 处理返回的数据result

       //通过处理result返回的结果集显示到页面
  }

 

 

 

 

2.交互流程

前台将需要查询的条件通过Ajax返回后台，后台查询过后将结果赋给User对象，对于返回的结果前台就可以自由操作了。