前台直接在ajax --data中将数据定义;ajax 的格式
<script type="text/javascript">
$(function(){
$("#bt1").click(function(){
var data = "test123";
alert("test");
$.ajax({
type: "GET",
url: "main/list1.do",
data:{data:data},
dataType: "json",
success: function(data){
debugger;
$.each(data, function(idx, obj) {
alert(obj.name);
});
/* if (data && data.success == "true") {
$('#info').html("共" + data.total + "条数据。
");
$.each(data.data, function(i, item) {
$('#info').append(
"编号:" + item.id + ",姓名:" + item.username
+ ",年龄:" + item.age);
});
} */
},
error : function() {
alert("error")
}
})
})
})
</script>
ajax 请求对象
ajax 请求对象
后台接收并返回list 数据(后台返回list 和map都可以在前台转化为json格式,如果传回string 类型会出现乱码,所以一般情况下我们直接传会list 或者map)
@RequestMapping(value = "/list", method = RequestMethod.GET)
@ResponseBody //在页面中进行响应
public Map<String, Object> getUserList(String data) {
System.out.println(data); //接受数据
List<Sys_users> list = new ArrayList<Sys_users>();
Sys_users um = new Sys_users();
Sys_users um1 = new Sys_users();
um.setId("1");
um.setName("test");
um1.setId("2");
um1.setName("admin");
list.add(um);
list.add(um1);
return list; //返回list
}
@ResponseBody //在页面中进行响应
public Map<String, Object> getUserList(String data) {
System.out.println(data); //接受数据
List<Sys_users> list = new ArrayList<Sys_users>();
Sys_users um = new Sys_users();
Sys_users um1 = new Sys_users();
um.setId("1");
um.setName("test");
um1.setId("2");
um1.setName("admin");
list.add(um);
list.add(um1);
return list; //返回list
}
在前台页面进行接受遍历
$.each(data, function(idx, obj) {
alert(obj.name);
});
alert(obj.name);
});
后台接收并返回map 数据
@RequestMapping(value = "/list", method = RequestMethod.GET)
@ResponseBody
public Map<String, Object> getUserList(String data) {
System.out.println(data);
List<Sys_users> list = new ArrayList<Sys_users>();
Sys_users um = new Sys_users();
um.setId("1");
um.setName("test");
list.add(um);
Map<String, Object> modelMap = new HashMap<String, Object>(3);
modelMap.put("total", "1");
modelMap.put("data", list);
modelMap.put("success", "true");
return modelMap;
}
@ResponseBody
public Map<String, Object> getUserList(String data) {
System.out.println(data);
List<Sys_users> list = new ArrayList<Sys_users>();
Sys_users um = new Sys_users();
um.setId("1");
um.setName("test");
list.add(um);
Map<String, Object> modelMap = new HashMap<String, Object>(3);
modelMap.put("total", "1");
modelMap.put("data", list);
modelMap.put("success", "true");
return modelMap;
}
前台将ajax 中的success 方法给为以下:map 数据可以直接用 data.属性 来获取值
success: function(data){
if (data && data.success == "true") {
$('#info').html("共" + data.total + "条数据。<br/>");
$.each(data.data, function(i, item) {
$('#info').append(
"编号:" + item.id + ",姓名:" + item.username
+ ",年龄:" + item.age);
});
}
},
if (data && data.success == "true") {
$('#info').html("共" + data.total + "条数据。<br/>");
$.each(data.data, function(i, item) {
$('#info').append(
"编号:" + item.id + ",姓名:" + item.username
+ ",年龄:" + item.age);
});
}
},