#SpringMVC+Ajax(JSON) #异步请求响应 @FDDLC

    科技2022-07-16  112

    首先需要导入<artifactId>jackson-databind</artifactId>(买一送二):

    Jackson是编码与解码JSON的工具。

    这里Jackson的作用:Ajax把JSON格式的数据(键值对字符串)发送到服务器,Jackson把JSON数据转换成对象(Account);当服务器响应浏览器时,Jackson再把对象(Account)转换成JSON数据。

    Jackson怎么用呢?只需要导入依赖,框架干活,我们不需要编写与Jackson相关的代码。

     

    Ajax核心部分:

     

    Controller核心部分:

     


    最后附上源码:

     

     

    项目结构:

     

    pom.xml的内容:

    <?xml version="1.0" encoding="UTF-8"?> <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>org.example</groupId> <artifactId>P055_JSON_Ajax</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <name>P055_JSON_Ajax Maven Webapp</name> <!-- FIXME change it to the project's website --> <url>http://www.example.com</url> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.7</maven.compiler.source> <maven.compiler.target>1.7</maven.compiler.target> </properties> <dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.1.8.RELEASE</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.6</version> </dependency> </dependencies> <build> <finalName>P055_JSON_Ajax</finalName> <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) --> <plugins> <plugin> <artifactId>maven-clean-plugin</artifactId> <version>3.1.0</version> </plugin> <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging --> <plugin> <artifactId>maven-resources-plugin</artifactId> <version>3.0.2</version> </plugin> <plugin> <artifactId>maven-compiler-plugin</artifactId> <version>3.8.0</version> </plugin> <plugin> <artifactId>maven-surefire-plugin</artifactId> <version>2.22.1</version> </plugin> <plugin> <artifactId>maven-war-plugin</artifactId> <version>3.2.2</version> </plugin> <plugin> <artifactId>maven-install-plugin</artifactId> <version>2.5.2</version> </plugin> <plugin> <artifactId>maven-deploy-plugin</artifactId> <version>2.8.2</version> </plugin> </plugins> </pluginManagement> </build> </project>

     

    web.xml的内容:

    <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app> <display-name>Archetype Created Web Application</display-name> <servlet> <servlet-name>dispatcherServlet</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <!--关联springmvc.xml,让其中的配置生效!--> <init-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:springmvc.xml</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dispatcherServlet</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>

     

    springmvc.xml的内容:

    <?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:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd"> <context:component-scan base-package="cn.liuxingchang"/> <mvc:annotation-driven/> <!--<mvc:resources mapping="/css/**" location="/css/"/>--> <mvc:resources mapping="/js/**" location="/js/"/> <!--<mvc:resources mapping="/image/**" location="/image/"/>--> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="viewResolver"> <property name="prefix" value="/WEB-INF/pages/"></property> <property name="suffix" value=".jsp"></property> </bean> </beans>

     

    index.jsp的内容:

    <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <script src="js/jquery-3.5.1.min.js"></script> <body> <button id="btn">test</button> </body> <script> $(function(){ $("#btn").click(function(){ //alert("静态资源过滤已生效!"); $.ajax({ url:"ajax", contentType:"application/json;charset=UTF-8", data:'{"id":1, "name":"Tom", "money":10.0}', dataType:"json", type:"post", success:function(data){ alert(data); alert(data.name); alert(data.id); alert(data.money); } }); }); }); </script> </html>

    Account.java的内容:

    package cn.liuxingchang.domain; public class Account { private Integer id; private String name; private Double money; @Override public String toString() { return "Account{" + "id=" + id + ", name='" + name + '\'' + ", money=" + money + '}'; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Double getMoney() { return money; } public void setMoney(Double money) { this.money = money; } }

     

    HelloController.java的内容:

    package cn.liuxingchang.controller; import cn.liuxingchang.domain.Account; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; @Controller public class HelloController { @RequestMapping("/ajax") @ResponseBody public Account test(@RequestBody Account account) { System.out.println(account); Account newAccount = account; System.out.println(newAccount); newAccount.setId(2); newAccount.setName("Jack"); newAccount.setMoney(20.0); return newAccount; } }

     

    Processed: 0.011, SQL: 8