云笔记项目 Unit01

最新推荐文章于 2024-04-29 03:49:58 发布
最新推荐文章于 2024-04-29 03:49:58 发布
阅读量553 收藏 7
点赞数 2
分类专栏： Java

云笔记

Spring MVC AJAX

Spring MVC 提供了 Ajax支持:

这里写图片描述

  1. 必须导入 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>

  2. 在控制器方法上使用 @ResponseBody 注解, 就可以自动的将控制器的返回值(JavaBean)转换为JSON发送到客户端.

案例:

  1. 创建Maven 项目

  2. 导入Spring MVC 和 jackson 

    <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>3.2.8.RELEASE</version>
</dependency>
<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>

  3. 配置Spring MVC: web.xml

      <servlet>
    <display-name>DispatcherServlet</display-name>
    <servlet-name>DispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <description></description>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:spring-*.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>DispatcherServlet</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>

  4. 添加Spring 配置文件: resource

    <?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context" 
    xmlns:jdbc="http://www.springframework.org/schema/jdbc"  
    xmlns:jee="http://www.springframework.org/schema/jee" 
    xmlns:tx="http://www.springframework.org/schema/tx"
    xmlns:aop="http://www.springframework.org/schema/aop" 
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xmlns:util="http://www.springframework.org/schema/util"
    xmlns:jpa="http://www.springframework.org/schema/data/jpa"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd
        http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-3.2.xsd
        http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-3.2.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd
        http://www.springframework.org/schema/data/jpa http://www.springframework.org/schema/data/jpa/spring-jpa-1.3.xsd
        http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.2.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd
        http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.2.xsd">
    <!-- 配置组件扫描 -->
    <context:component-scan 
        base-package="controller"/>
    <!-- 配置MVC注解扫描 -->
    <mvc:annotation-driven />

</beans>

  5. 测试 …

  6. 添加控制器:

    @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;
    }
}

  7. 用浏览器测试:

    http://localhost:8080/spring-ajax/demo/ary.do
http://localhost:8080/spring-ajax/demo/bean.do
http://localhost:8080/spring-ajax/demo/list.do
http://localhost:8080/spring-ajax/demo/map.do
http://localhost:8080/spring-ajax/demo/list2.do
http://localhost:8080/spring-ajax/demo/map2.do

  8. 导入Jquery

    webapp/js/jquery-1.4.3.js

  9. 开发客户端HTML demo.html

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spring MVC AJAX DEMO</title>
<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: 'json',
        success: function(ary){
            console.log(ary);
            for(var i=0; i<ary.length; i++){
                var obj = ary[i];
                // obj = {age:4, name:TOm, price:}
                $('#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&lt;Map&gt;数据</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>

  10. 测试, Good Luck!

KopWelkin
关注
专栏目录
云笔记项目
05-07
云笔记，是tmocc上的一个子项目，用于客户进行在线学习记录，分享，收藏笔记，以及参与社区活动。传入的文件中有整个项目的源码+HTML网页+建表sql语句+数据表联系图
坚持完成这套学习手册，你就可以去 Google 面试了
历史上的今天
10-12 7127
本文为掘金投稿，译文出自：掘金翻译计划（翻译不易，欢迎 Star 支持）。 原文地址：Google Interview University 原文作者：John Washam 译者：Aleen，Newton，bobmayuze，Jaeger，sqrthree 友情提醒：文章较长，需耐心阅读。 这是？这是我为了从 Web 开发者（自学、非计算机科学学位）蜕变至 Go...
云笔记项目 Unit02
KopWelkin的博客
07-03 568
达内java学习day61 云笔记项目 Unit02
云笔记项目 Unit04
KopWelkin的博客
07-04 567
达内java学习day63 云笔记项目 Unit04
云笔记项目 Unit05
KopWelkin的博客
07-05 709
达内java学习day64 云笔记项目 Unit05
云笔记项目 Unit09
KopWelkin的博客
07-07 394
达内java学习day68 云笔记项目 Unit09
云笔记项目 Unit03
KopWelkin的博客
07-04 1143
达内java学习day62 云笔记项目 Unit03
云笔记项目 Unit06
KopWelkin的博客
07-05 437
达内java学习day65 云笔记项目 Unit06
云笔记项目 Unit08
KopWelkin的博客
07-06 1060
达内java学习day67 云笔记项目 Unit08
云笔记项目 Unit07
KopWelkin的博客
07-06 853
达内java学习day66 云笔记项目 Unit07
BTP Integration Suite学习笔记 - (Unit1) Developing with SAP Integration Suite
07-11 889
一图理解什么是分布式体系架构：分布式的架构中包括很多子系统，这些子系统在特定体系结构的框架内耦合在一起，并协同处理任务。不同的传输协议发布管理监控错误识别和纠正延迟服务质量安全可实施性可观察性文档API就是解决办法中最重要的一种。云原生架构就是基于API。练习场景一家公司向终端客户销售商品。由于全球发货问题，部分产品无法按时发货。应该通知订购这些产品的客户延迟交货的情况。（1）（2）（3）分别是产品清单，员工，和流程开始。
Spark大数据处理讲课笔记2.4 IDEA开发词频统计项目
howard2005的专栏
03-29 794
1. 掌握本地模式执行Spark程序； 2. 掌握集群模式执行Spark程序
Vue 学习笔记（4）Vue-cli4 项目搭建 + 目录结构 + 项目打包、部署
2401_84435739的博客
04-29 713
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】JavaScript性能linux。
云计算学习路线之云上运维(百度云智学院学习笔记)
zbp_12138的博客
04-17 1174
理解百度整体运维技术，数据库运维技术，掌握效率云设计理念及实践 该部分分为3个部分,分别是数据库、效率云和运维,其中效率云有三个实验 数据库 百度数据库总述与最佳实践 百度数据库运维及Redis异地多活实践 百度数据库运维体系及技术 效率云 DevOps设计理念与实践 效率云DevOps实验—用户故事地图实战 云上开发实践——导入代码库 云上开发实践——设计提交流水线 运维 ...
Spark大数据处理讲课笔记2.1 初识Spark
howard2005的专栏
03-20 1783
1. 了解什么是Spark计算框架； 2. 了解Spark计算框架的特点； 3. 了解Spark计算框架的应用场景； 4. 理解Spark框架与Hadoop框架的对比
基于JavaScript和HTML的前端私教课程设计源码
最新发布
09-24
该项目是一个基于JavaScript和HTML的前端私教课程设计源码，主要使用JavaScript语言开发。项目共包含54个文件，其中33个JavaScript文件，7个HTML文件，6个Markdown文件，4个Java文件，2个PDF文件，1个JSON文件，1个YAML文件。该课程设计旨在提供高效的前端学习资源。
嵌入式学习之光照不足报警检测电路.zip
09-24
嵌入式学习，电子信息技术
云笔记项目springboot
09-11
云笔记项目是一个使用Spring Boot框架开发的项目。它利用Spring Data JPA来实现对数据库的操作。在该项目中，使用了Eclipselink作为持久化提供程序，来与数据库进行交互。项目中包含了多个示例模块，例如eclipselink...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值