前台与后台交互（ajax与datagrid入门）

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

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

@ResponseBody  
public void getUser(HttpServletRequest request,HttpServletResponse response) {
List<User> 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：<script type="text/javascript">
 $(function() {
$('#dg').datagrid({
   url:'userController/getAll.action',
   striped : true,
/*    fitColumns:true, */
rownumbers : true,
method: 'POST',
pagination : true,
loadMsg:'正在努力为您查找中……',
singleSelect : true,
pageSize : 10,
pageList : [ 10, 20, 30, 40, 50, 100, 200, 300, 400, 500 ],
   columns:[[
       {width : '180',title : '编号',field : 'id',align: 'center' },
       {width : '180',title : '姓名',field : 'username',sortable : true,align: 'center' },
       {width : '180',title : '密码',field : 'pwd',sortable : true,align: 'center' },  
       {width : '230', title : '操作',field : 'action', align: 'center', 
  formatter : function(value, row,index) {
  var str =  '<img class="iconImg ext-icon-note" title="查看" οnclick="showFun(\''+row.id +'\');"/>';
  str += '<img class="iconImg ext-icon-note_edit" title="编辑" οnclick="editFun(\''+row.id +'\');"/>';
  str += '<img class="iconImg ext-icon-note_delete" title="删除" οnclick="removeFun(\''+row.id +'\');"/>';
  return str;
  }
              }
   ]]
});
});
</script>

这样前台就能显示表格数据，具体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!");
}

})

}