玩转spring boot——结合jQuery和AngularJs

在上篇的基础上

准备工作：

修改pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
 
    <groupId>com.github.carter659</groupId>
    <artifactId>spring03</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>
 
    <name>spring03</name>
    <url>http://maven.apache.org</url>
 
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.4.2.RELEASE</version>
    </parent>
 
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <java.version>1.8</java.version>
    </properties>
 
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>
    </dependencies>
 
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
 
</project>

pom.xml

修改App.java

package com.github.carter659.spring03;
 
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
 
@SpringBootApplication
public class App {
 
    public static void main(String[] args) {
        SpringApplication.run(App.class, args);
    }
 
}

新建“Order.java”类文件：

package com.github.carter659.spring03;
 
import java.util.Date;
 
public class Order {
 
    public String no;
 
    public Date date;
 
    public int quantity;
}

说明一下：这里我直接使用public字段了，get/set方法就不写了。

新建控制器“MainController”：

package com.github.carter659.spring03;
 
import java.time.ZoneId;
import java.util.HashMap;
import java.util.Map;
 
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
 
@Controller
public class MainController {
 
    @GetMapping("/")
    public String index() {
        return "index";
    }
 
    @GetMapping("/jquery")
    public String jquery() {
        return "jquery";
    }
 
    @GetMapping("/angularjs")
    public String angularjs() {
        return "angularjs";
    }
 
    @PostMapping("/postData")
    public @ResponseBody Map<String, Object> postData(String no, int quantity, String date) {
        System.out.println("no:" + no);
        System.out.println("quantity:" + quantity);
        System.out.println("date:" + date);
        Map<String, Object> map = new HashMap<>();
        map.put("msg", "ok");
        map.put("quantity", quantity);
        map.put("no", no);
        map.put("date", date);
        return map;
    }
 
    @PostMapping("/postJson")
    public @ResponseBody Map<String, Object> postJson(@RequestBody Order order) {
        System.out.println("order no:" + order.no);
        System.out.println("order quantity:" + order.quantity);
        System.out.println("order date:" + order.date.toInstant().atZone(ZoneId.systemDefault()).toLocalDate());
        Map<String, Object> map = new HashMap<>();
        map.put("msg", "ok");
        map.put("value", order);
        return map;
    }
}

新建jquery.htm文件l:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery</title>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    /*<![CDATA[*/
    function postData() {
        var data = 'no=' + $('#no').val() + '&quantity=' + $('#quantity').val()
                + '&date=' + $('#date').val();
 
        $.ajax({
            type : 'POST',
            url : '/postData',
            data : data,
            success : function(r) {
                console.log(r);
            },
            error : function() {
                alert('error!')
            }
        });
    }
 
    function postJson() {
        var data = {
            no : $('#no').val(),
            quantity : $('#quantity').val(),
            date : $('#date').val()
        };
        $.ajax({
            type : 'POST',
            contentType : 'application/json',
            url : '/postJson',
            data : JSON.stringify(data),
            success : function(r) {
                console.log(r);
            },
            error : function() {
                alert('error!')
            }
        });
    }
    /*]]>*/
</script>
</head>
<body>
    no:
    <input id="no" value="No.1234567890" />
    <br /> quantity:
    <input id="quantity" value="100" />
    <br /> date:
    <input id="date" value="2016-12-20" />
    <br />
    <input value="postData" type="button" onclick="postData()" />
    <br />
    <input value="postJson" type="button" onclick="postJson()" />
</body>
</html>

新建“angularjs.html”文件：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>angularjs</title>
<script src="//cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('MainController', function($rootScope, $scope, $http) {
 
        $scope.data = {
            no : 'No.1234567890',
            quantity : 100,
            'date' : '2016-12-20'
        };
 
        $scope.postJson = function() {
            $http({
                url : '/postJson',
                method : 'POST',
                data : $scope.data
            }).success(function(r) {
                $scope.responseBody = r;
            });
 
        }
    });
</script>
</head>
<body ng-app="app" ng-controller="MainController">
    no:
    <input id="no" ng-model="data.no" />
    <br /> quantity:
    <input id="quantity" ng-model="data.quantity" />
    <br /> date:
    <input id="date" ng-model="data.date" />
    <br />
    <input value="postJson" type="button" ng-click="postJson()" />
    <br />
    <br />
    <div>{{responseBody}}</div>
</body>
</html>

项目结构如下图：

一、结合jquery

运行App.java后进去“http://localhost:8080/jquery”页面

点击“postData”按钮：

jquery成功的调用了spring mvc的后台方法“public @ResponseBody Map<String, Object> postData(String no, int quantity, String date) ”

这里，“date”参数我使用的是String类型，而并不是Date类型。因为大多数情况是使用对象形式来接收ajax客户端的值，所以我这里偷懒了，就直接使用String类型。如果想使用Date类型，则需要使用@InitBinder注解，后面的篇幅中会讲到，在这里就不再赘述。

另外，使用“thymeleaf ”模板引擎在编写js时，“&”关键字要特别注意，因为“thymeleaf ”模板引擎使用的是xml语法。因此，在<script>标签的开始——结束的位置要加“/*<![CDATA[*/ ...../*]]>*/”

例如：

<script type="text/javascript">
    /*<![CDATA[*/
 
        // javascript code ...
 
    /*]]>*/
</script>

否则，运行“thymeleaf ”模板引擎时就会出现错误“org.xml.sax.SAXParseException:...”

点击“postJson”按钮：

jquery则成功调用了后台“public @ResponseBody Map<String, Object> postJson(@RequestBody Order order)”方法，

并且参数“order”中的属性或字段也能被自动赋值，而Date类一样会被赋值。

注意的是：在使用jquery的$.ajax方法时，contentType参数需要使用“application/json”，而后台spring mvc的“postJson”方法中的“order”参数也需要使用@RequestBody注解。

二、结合angularjs

进入“后进去http://localhost:8080/angularjs”页面

点击“postJson”按钮：

使用angularjs后，依然能调用“public @ResponseBody Map<String, Object> postJson(@RequestBody Order order) ”方法。

代码：https://github.com/carter659/spring-boot-03.git

如果你觉得我的博客对你有帮助，可以给我点儿打赏，左侧微信，右侧支付宝。

有可能就是你的一点打赏会让我的博客写的更好:)

玩转spring boot系列目录

玩转spring boot——结合jQuery和AngularJs的更多相关文章

玩转spring boot——开篇
很久没写博客了,而这一转眼就是7年.这段时间并不是我没学习东西,而是园友们的技术提高的非常快,这反而让我不知道该写些什么.我做程序已经有十几年之久了,可以说是彻彻底底的“程序老炮”,至于技术怎么样?我 ...
玩转spring boot——结合AngularJs和JDBC
参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备在建立mysql数据库后新建表“t_order” ; -- ----- ...
玩转spring boot——AOP与表单验证
AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门修改“pom.xml ...
玩转spring boot——快速开始
开发环境: IED环境:Eclipse JDK版本:1.8 maven版本:3.3.9 一.创建一个spring boot的mcv web应用程序打开Eclipse,新建Maven项目选择quic ...
玩转spring boot——结合redis
一.准备工作下载redis的windows版zip包:https://github.com/MSOpenTech/redis/releases 运行redis-server.exe程序出现黑色窗口 ...
玩转spring boot——结合JPA入门
参考官方例子:https://spring.io/guides/gs/accessing-data-jpa/ 接着上篇内容一.小试牛刀创建maven项目后,修改pom.xml文件 <proj ...
玩转spring boot——结合JPA事务
接着上篇一.准备工作修改pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...
玩转spring boot——MVC应用
如何快速搭建一个MCV程序? 参照spring官方例子:https://spring.io/guides/gs/serving-web-content/ 一.spring mvc结合thymeleaf ...
玩转spring boot——properties配置
前言在以往的java开发中,程序员最怕大量的配置,是因为配置一多就不好统一管理,经常出现找不到配置的情况.而项目中,从开发测试环境到生产环境,往往需要切换不同的配置,如测试数据库连接换成生产数据库连 ...

随机推荐

CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
JavaScript权威指南 - 数组
JavaScript数组是一种特殊类型的对象. JavaScript数组元素可以为任意类型,最大容纳232-1个元素. JavaScript数组是动态的,有新元素添加时,自动更新length属性. J ...
.net 大型分布式电子商务架构说明
.net大型分布式电子商务架构说明背景构建具备高可用,高扩展性,高性能,能承载高并发,大流量的分布式电子商务平台,支持用户,订单,采购,物流,配送,财务等多个项目的协作,便于后续运营报表,分析,便 ...
使用ubuntu作为web开发环境的一些感受
从ms-dos,win95,win98,winMe,winXp,vista,win7,win10我都有使用的经历,我使用时间最长的应属winxp,其次是win7,说实话,我觉得这两个系统是微软做的最好 ...
angularjs 依赖注入--自己学着实现
在用angular依赖注入时,感觉很好用,他的出现是为了"削减计算机程序的耦合问题" ,我怀着敬畏与好奇的心情,轻轻的走进了angular源码,看看他到底是怎么实现的,我也想写个 ...
【算法】C语言实现数组的动态分配
C语言实现数组的动态分配作者:白宁超 2016年10月27日20:13:13 摘要:数据结构和算法对于编程的意义不言而喻,具有指导意义的.无论从事算法优化方向研究,还是大数据处理,亦或者网站开发AP ...
使用EF CodeFirst 创建数据库
EntityFramework 在VS2015添加新建项时,选择数据->ADO.NET 实体数据模型,有一下选项来自数据库的EF设计器,这个就是我们最常用的EntityFramework设计模 ...
CSS中强悍的相对单位之em(em-and-elastic-layouts)学习小记
使用相对单位em注意点 1.浏览器默认字体是16px,即1em = 16px,根元素设置如下 html{ font-size: 100%; /* WinIE text resize correctio ...
jquery.each()
$(selector).each(function(index,element)) index - 选择器的 index 位置 element - 当前的元素(也可使用 "this" ...
OpenGL shader 中关于顶点坐标值的思考
今天工作中需要做一个事情: 在shader内部做一些空间距离上的计算,而且需要对所有的点进行计算,符合条件的显示,不符合条件的点不显示. 思路很简单,在vertex shader内知道顶点坐标,进行计 ...

玩转spring boot——结合jQuery和AngularJs

玩转spring boot——结合jQuery和AngularJs的更多相关文章

随机推荐

热门专题