前台与后台交互(ajax与datagrid入门)

     本人刚刚学习java,记录下学习中的点点滴滴,今天首先记录下关于前台与后台的数据交互,后台使用的SSM框架,主要代码如下:

        @RequestMapping(value="/getAll",method=RequestMethod.POST)

@ResponseBody  
public void getUser(HttpServletRequest request,HttpServletResponse response) {
List allUser = userService.getAll();
String jsonString = JSON.toJSONString(allUser);
try {
PrintWriter out = response.getWriter();
out.write(jsonString);
out.flush();
} catch (IOException e) {
e.printStackTrace();

}

后台控制器的主要功能就是获取了用户的所以信息,包括编号、姓名、年龄等,以JSON格式返回到后台,前台我这边使用两种方式演示下,一种是datagrid网格形式一种是ajax;

datagrid:

这样前台就能显示表格数据,具体datagrid请参考官方文件;

ajax:

function loadBar(){
myChart.showLoading();  //显示loading状态
$.ajax({
/* url:"data/barData.json",  */
 url:"http://localhost:8080/screen/userController/getAll.action", 
async : true,
                                cache : false, 
type : "post", 
dataType:"json", 
success:function(data){
alert(JSON.stringify(data));//object转换成json
/*  val=eval(data);//转换成js对象  
alert(val[0].age); 
alert(data);  */
/* if(data.success){
myChart.hideLoading();
var dateset=getDataSet(data.list);
option.xAxis.data=dateset.getcols("type");
option.series[0].data=dateset.getcols("num");
myChart.setOption(option); 
}*/
},
error:function(){
alert("data wrong!");
}

})

}

你可能感兴趣的:(前台与后台交互(ajax与datagrid入门))