1. 程式人生 > >Ajax 非同步或取後臺資料json顯示到頁面

Ajax 非同步或取後臺資料json顯示到頁面

        今天心情很好,終於寫出來了用Ajax非同步獲取資料,不重新整理頁面。

        後臺方法:

        @RequestMapping("/uspaces.html" )
public void getUserSpace(HttpServletRequest request,HttpServletResponse response,String userName) throws IOException{
// String rtn="";
// PrintWriter out = response.getWriter();
// out.print(rtn);
// out.flush();
// out.close();
 System.out.println(userName);
 List<ViewSpace> viewSpaces = viewSpaceService.getAllSpaces();
 String rtn=JsonUtil.list2json(viewSpaces);
 System.out.println(rtn);
 response.setCharacterEncoding("UTF-8");
// response.getWriter().write("{\"success\":true, \"data\":" + JsonUtil.list2json(viewSpaces) + "}");
// String rtn = "{\"success\":true, \"data\":" + JsonUtil.list2json(viewSpaces) + "}";
// response.getWriter().print(rtn);
 response.getWriter().write(rtn);
 response.getWriter().flush();
 response.getWriter().close();
}

        前臺Ajax:

          $("#sub").click(function(){
                var userName=$("#userName").val();
                alert(userName);
                $.post(
                      "<%= basePath %>manageSpaces/uspaces.html",
                      {userName:userName       //提交引數
                      },
                      function(rtn){
                            alert(rtn);//


//                             eval("data="+rtn);
//                             var data=eval(rtn);
//                             var data=rtn.prototype.evalJSON = function(){
//                                     return eval('(' + this + ')');
//                                  };
                            var json = (new Function('return '+rtn +';'))();    //Json字串變成Json物件
                            alert(json);
                            var text='';
                            $(json).each(function(){
                                 text+='<a>'+this.spaceName+'</a>&nbsp&nbsp&nbsp<a>'+this.address+'</a><br>';
                            });
                            alert(text);
                            $("#spacelist").html(text);
                      }
                
                
                );
          }); 

      在後臺拼接出來的字串10個物件:[{"欄位名":"值","欄位名":"值","欄位名":"值"........},{"欄位名":"值","欄位名":"值","欄位名":"值"........},{"欄位名":"值","欄位名":"值","欄位名":"值"........},..........]

[{"address":"黑龍江","beenNum":"1","briefDesc":"","description":"","nowantNum":"1","spaceId":"1","spaceName":"哈爾濱","user":{"lastLoginIp":"","lastLoginTime":"","password":"123","userId":"1","userName":"yezi"},"wantNum":"1","website":""},{"address":"黑龍江","beenNum":"1","briefDesc":"","description":"","nowantNum":"1","spaceId":"2","spaceName":"伊春","user":{"lastLoginIp":"","lastLoginTime":"","password":"123","userId":"3","userName":"jiajia"},"wantNum":"1","website":""},{"address":"遼寧省","beenNum":"3","briefDesc":"","description":"","nowantNum":"5","spaceId":"3","spaceName":"瀋陽","user":{"lastLoginIp":"","lastLoginTime":"","password":"123","userId":"1","userName":"yezi"},"wantNum":"2","website":""},{"address":"北京市","beenNum":"4","briefDesc":"","description":"","nowantNum":"5","spaceId":"4","spaceName":"北京","user":{"lastLoginIp":"","lastLoginTime":"","password":"123","userId":"2","userName":"quanquan"},"wantNum":"3","website":""},{"address":"中國","beenNum":"7","briefDesc":"","description":"","nowantNum":"8","spaceId":"5","spaceName":"張家界","user":{"lastLoginIp":"","lastLoginTime":"","password":"123","userId":"5","userName":"caicai"},"wantNum":"6","website":""},{"address":"中國","beenNum":"1","briefDesc":"","description":"","nowantNum":"2","spaceId":"6","spaceName":"景德鎮","user":{"lastLoginIp":"","lastLoginTime":"","password":"123","userId":"2","userName":"quanquan"},"wantNum":"3","website":""},{"address":"遼寧","beenNum":"1","briefDesc":"","description":"","nowantNum":"0","spaceId":"7","spaceName":"大連","user":{"lastLoginIp":"","lastLoginTime":"","password":"123","userId":"4","userName":"feifei"},"wantNum":"3","website":""},{"address":"吉林","beenNum":"2","briefDesc":"","description":"","nowantNum":"0","spaceId":"8","spaceName":"長春","user":{"lastLoginIp":"","lastLoginTime":"","password":"123","userId":"4","userName":"feifei"},"wantNum":"1","website":""},{"address":"雲南","beenNum":"1","briefDesc":"","description":"","nowantNum":"0","spaceId":"9","spaceName":"大理","user":{"lastLoginIp":"","lastLoginTime":"","password":"admin","userId":"6","userName":"admin"},"wantNum":"1","website":""},{"address":"中國","beenNum":"2","briefDesc":"","description":"","nowantNum":"1","spaceId":"10","spaceName":"上海","user":{"lastLoginIp":"","lastLoginTime":"","password":"admin","userId":"6","userName":"admin"},"wantNum":"1","website":""}]