mvc-ajax(从后台取数据显示到页面上)

最新推荐文章于 2023-09-04 16:04:37 发布

不说不闹睡觉觉

最新推荐文章于 2023-09-04 16:04:37 发布

阅读量1.8k

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/whatisthespring/article/details/76020980

版权

<--------------------------------------------------------------------------------------->

springMVC配置全都省略了！

但是使用json必须导入Jackson API：

  <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-annotations</artifactId>
        <version>2.2.3</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-core</artifactId>
        <version>2.2.3</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.2.3</version>
    </dependency>

1.添加控制器：

@Controller
@RequestMapping("/demo")
public class DemoController {

    @RequestMapping("/ary.do")
    @ResponseBody
    //ResponseBody会自动的将返回结果中JavaBean转换
    //为JSON字符串发送到浏览器客户端, 底层用了
    // Jackson API
    public Object test(){
        String[] ary = {"熊三","熊二","熊大"};
        return ary;
    }

    @RequestMapping("/bean.do")
    @ResponseBody
    //将JavaBean作为返回值,ResponseBody注解将Bean
    //转换为 Json 字符串发送到浏览器端
    public Object bean(){
        return new Foo(8,"Tom", 34.6);
    }

    @RequestMapping("/list.do")
    @ResponseBody
    public Object list(){
        List<Foo> list = new ArrayList<Foo>();
        list.add(new Foo(1, "Tom", 3.4));
        list.add(new Foo(2, "Jerry", 3.4));
        list.add(new Foo(3, "Andy", 3.5));
        list.add(new Foo(4, "Wang", 3.2));
        return list;
    }

    @RequestMapping("/map.do")
    @ResponseBody
    public Object map(){
        Map<String, Object> map = 
                new LinkedHashMap<String, Object>();
        map.put("age", 20);
        map.put("name", "Andy");
        map.put("price", 123.6);
        return map;
    }


    @RequestMapping("/list2.do")
    @ResponseBody
    public Object list2(){
        List<String> list = 
                new ArrayList<String>();
        list.add("熊三");
        list.add("熊大");
        list.add("熊二");
        return list;
    }

    //List<Map> 
    @RequestMapping("/map2.do")
    @ResponseBody
    public Object map2(){
        List<Map<String, Object>> list=
            new ArrayList<Map<String,Object>>();
        Map<String, Object> map = 
            new LinkedHashMap<String,Object>();
        map.put("age", 5);
        map.put("name", "Tom");
        map.put("price", 4.5);
        list.add(map);
        map=new LinkedHashMap<String,Object>();
        map.put("age", 6);
        map.put("name", "Jerry");
        map.put("price", 4.5);
        list.add(map);
        map=new LinkedHashMap<String,Object>();
        map.put("age", 8);
        map.put("name", "Andy");
        map.put("price", 5.5);
        list.add(map);
        return list;
    }
}

2.导入jQuery：jQuery-1.4.3.js

开发静态页面Html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
	<title> new demo </title>
	<meta charset="UTF-8">
	<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
  	<script type="text/javascript">
		$(function(){
			$('#ary-btn').click(aryDemo);
			$('#map2-btn').click(map2Demo);
			$('#map-btn').click(mapDemo);
	});
		function aryDemo(){
			//console.log('Click');
			$.ajax({
				url:'demo/ary.do',
				type:'get',
				dataType:'json',
				success:function(ary){
					console.log(ary);
					for(var i = 0;i<ary.length;i++){
						$('#ary-result').append(ary[i]);
					}
				},	
				error:function(){
					alert('错误');
				}
			});
		}
		function map2Demo(){
			//console.log('click');
			$.ajax({
				url:'demo/map2.do',
				type:'get',
				dataType:'josn',
				success:function(ary){
					console.log(ary);
					for(var i=0;i<ary.length;i++){
						var obj=ary[i];
						//obj = {age:4,name:Tom,price:.4.5};
						$('#map2-result').append(obj.age+','+obj.name+','+obj.price+'<br>');
					}
				},
				error:function(){
					alert('错误');
				}
			});
    		}
		function mapDemo(){
			//console.log('Click');
			$.ajax({
				url:'demo/map.do',
				type:'get',
				dataType:'json',
				success:function(obj){
					console.log(obj);
					$('#map-result').append(obj.age+','+obj.name+','+obj.price+'<br>');
				},
				error:function(){alert('错误');}
			});
		}
	</script>
 </head>

 <body>
  	
    <!-- webapp/demo.html -->
    <h1>Spring MVC AJAX</h1>
    <h2>获取数组数据</h2>
    <input type="button" id="ary-btn" 
        value="数组">
    <p id="ary-result"></p>

    <h2>获取List<Map>数据</h2>
    <input type="button" id="map2-btn" 
        value="Map2">
    <p id="map2-result"></p>

    <h2>获取Map数据</h2>
    <input type="button" id="map-btn" 
        value="Map">
    <p id="map-result"></p>

</body></html>