不擅长前端页面开发,许久不用,有点忘记了,上午敲了两个demo,总结一下.
思路:前台页面使用ajax发送请求,请求控制器,控制器调用mapper,查询到数据后,以json格式返回给前端页面.在前端页面遍历显示出来.
实例一:使用$.ajax()
$.ajax({
"url":"${pageContext.request.contextPath }/list",
"type":"get",
success:function(data){
var result = "";
for(var i=0;i";
result +=""+data[i].id+" ";
result +=""+data[i].name+" ";
result +="";
}
$("#mytbody").html(result);
},
"dataType":"json"
});
实例二:使用$.post()
$.post(
"${pageContext.request.contextPath }/list",
"post",
function(data){
var result = "";
for(var i=0;i";
result +=""+data[i].id+" ";
result +=""+data[i].name+" ";
result +="";
}
$("#mytbody").html(result);
},
"json"
);
实例二:使用$.get()
$.get(
"${pageContext.request.contextPath }/list",
"get",
function(data){
var result = "";
for(var i=0;i";
result += ""+data[i].id+" ";
result += ""+data[i].name+" ";
result += "";
}
$(#mytbody#mytbody).html(result);
},
"json"
);
总结1:$.ajax({})格式,里面有花括号,例如
$.ajax({
"url":"list",
"type":"post",
success:function(data){},
"dataType":"json"
});
前面的双引号可以省略,即
$.ajax({
url:"list",
type:"post",
data:{"id":1,"name":"zhangsan"};
success:function(data){},
dataType:"json"
});
总结2:$.post();和$.get();格式一样的
$.post(
"list",
"post",
{"id":1,"name":"lisi"},
function(data){},
"json"
);
post和get里面没有花括号.发送给控制器的json格式,有严格要求.