Spring Mvc模式下Jquery Ajax 與後臺交互操做

1.基本代碼ajax

1)後臺控制器基本代碼json

@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類代碼app

 

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.交互流程post

前臺將須要查詢的條件經過Ajax返回後臺,後臺查詢事後將結果賦給User對象,對於返回的結果前臺就能夠自由操做了。this

相關文章
相關標籤/搜索