欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

玩转spring boot 结合jQuery和AngularJs（3）

程序员文章站 2024-03-09 13:14:35
在的基础上 准备工作： 修改pom.xml

在的基础上

准备工作：

修改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>

修改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.html文件:

<!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>

项目结构如下图：

玩转spring boot 结合jQuery和AngularJs（3）

一、结合jquery

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

点击“postdata”按钮：

玩转spring boot 结合jQuery和AngularJs（3）

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:...”

玩转spring boot 结合jQuery和AngularJs（3）

点击“postjson”按钮：

玩转spring boot 结合jQuery和AngularJs（3）

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”按钮：

玩转spring boot 结合jQuery和AngularJs（3）

使用angularjs后，依然能调用“public @responsebody map<string, object> postjson(@requestbody order order)”方法。

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： ASP.NET 统计图表控件小结

下一篇： asp.net 身份验证（分目录验证篇）

推荐阅读