2021-10-12 SpringMVC实现JSON数据转换，AJAX失效（解决）

实现JSON数据转换时，在JSP页面使用AJAX失效(已解决)

前情提要：本实验是简单实现JSON数据交互，编写完成后能运行，但是无法获取到JSON数据。

实验环境：Intellij IDEA
jdk：1.8

步骤：

使用idea创建一个springmvc项目（略）
配置Tomcat（略）
导入Jar包
jackson所需jar包
- jackson-annotations-2.12.3.jar：JSON转换注解包
- jackson-core-2.12.3.jar：JSON转换核心包
- jackson-databind-2.12.3.jar：JSON转换的数据绑定包
spring框架所需jar包
- commons-logging-1.2.jar
- spring-beans-5.2.9.RELEASE.jar
- spring-context-5.2.9.RELEASE.jar
- spring-core-5.2.9.RELEASE.jar
- spring-expression-5.2.9.RELEASE.jar
- spring-aop-5.2.9.RELEASE.jar
- spring-web-5.2.9.RELEASE.jar
- spring-webmvc-5.2.9.RELEASE.jar

修改web.xml文件

<!--配置Spring mvc前端控制器DispatcherServlet-->
<servlet><servlet-name>springmvc</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><init-param><param-name>contextConfigLocation</param-name><param-value>classpath:com/springmvc-config.xml</param-value></init-param><!--1 表示容器在启动时立即加载springmvc配置文件--><load-on-startup>1</load-on-startup>
</servlet><servlet-mapping><servlet-name>springmvc</servlet-name><!--/ 表示拦截所有url请求--><url-pattern>/</url-pattern>
</servlet-mapping><!--配置编码过滤器-->
<filter><filter-name>CharacterEncodingFilter</filter-name><filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class><init-param><param-name>encoding</param-name><param-value>UTF-8</param-value></init-param>
</filter><filter-mapping><filter-name> CharacterEncodingFilter</filter-name><url-pattern>/*</url-pattern>
</filter-mapping>

springmvc-config.xml

    <!--指定需要扫描的包-->
<context:component-scan base-package="com.controller"/><!--配置注解驱动-->
<mvc:annotation-driven/>
<mvc:resources mapping="/js/**" location="/js/"></mvc:resources>

添加静态资源
jquery-1.11.3.min.js 存放于/js/文件夹下。

添加POJO【User.java】

package com.po;public class User {private String username;private String password;public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}@Overridepublic String toString() {return "User{" +"username='" + username + '\'' +", password='" + password + '\'' +'}';}
}

编写jsp文件【默认的 index.jsp】

   <body><form>用户名：<input type="text" name="username" id="username"></br>密&nbsp;&nbsp;&nbsp;码：<input type="text" name="password" id="password"></br><input type="button" value="测试JSON交互" onclick="testJson()"></form></body><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">function testJson() {//获取输入用户名和密码var username = $("#username").val();var password = $("#password").val();//ajax请求{Json对象}$.ajax({url:"${pageContext.request.contextPath}/testJson",type:"post",//data表示发送的数据,json字符串data:JSON.stringify({username:username,password:password}),//定义发送请求的数据格式为JSON字符串contentType:"application/json;charset=UTF-8",//定义回调响应的数据格式为JSON字符串，该属性可以省略dataType:"json",//成功响应的结果success:function(data) {if (data!=null){alert("您输入的用户名为：" +data.username+"密码为："+data.password);}}})}</script>

Usercontroller.java

package com.chapter14.controller;import com.chapter14.po.User;
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 UserController {@RequestMapping("/testJson")@ResponseBodypublic User testJson(@RequestBody User user){//打印接受的JSON格式数据System.out.println(user);//返回JSON格式的响应return user;}
}

最终运行时，无论怎么点击按钮都没有反应。控制台也没有报错。

特发此贴，记录一下。还请遇到相似问题的同仁不吝赐教。

2021.10.15 更新，已解决
第一步：
首先看一下，Settings->Project Structure中的最下面一栏“problems”

当时我这边是有几个待处理的problem的（具体多少我忘了），我把所有缺失的[fix]了一下，竟然就能获取到json了！！！！[猛男落泪.jpg]
不枉我天天煞费苦心的找问题。
当然，如果有小伙伴处理完这些还是没有用或者！根本没有显示有problems，那你不用慌，肯定是这一步的问题，详情看看下一步：
第二步：
这里有个题外话到最后再讲，因为有点玄乎。我先把方法分享一下。
首先，在Project Structure中，选择“Libraries”，然后点击"+"。

然后，找到已下载好的jquery文件（如果你只有min版本，那就只添加这一个吧，我没试过，应该也行），添加进来。

这时候其实就可以看到 Problems 那里已经有标识了

莫心急，各位按流程走完，不然有点玄乎。
下一步，来到 Project Structure 中的 Modules，在依赖中找到添加的js，勾选添加；

最后，就是去把 Problems 中的问题全部 [fix] !!
现在就可以去运行看看了。

好了，如果你成功了，可以来看看这里，我有话要说：
后来我把 Libraries 中刚刚添加的 js 删除了！结果，还是能成功运行！！ 我人傻了！
我不知道这其中到底发生了什么，可能idea比较智能，在 fix 完problem它就解决了原本的缺陷，所以后来哪怕删掉导入的 js ，它也能继续运行。

最后发一张获取到json数据的截图，纪念一下。

如果你这里获取的数据为 undefined ,那么就是你写的ajax请求中【dataType: “text”】没有改成【dataType: “json”】
感谢阅读！不管有没有帮到你，希望能带给你相关的灵感！

2021-10-12 SpringMVC实现JSON数据转换，AJAX失效（解决）相关推荐

电动力学每日一题 2021/10/12
电动力学每日一题 2021/10/12 (a) To make the EM field trapped inside a perfectly electric conducting cavity, ...
关于mac注册机core keygen在10.12及以上版本不能使用的解决方法
2019独角兽企业重金招聘Python工程师标准>>> 今天下了在下载了一个Alfred 3 关于这个mac效率神奇刚刚入手感觉很好用,但在破解的时候遇到一点麻烦,就是出现10.9能 ...
SpringMVC（JSON数据转换，乱码问题）
1.什么是JSON? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式,目前使用特别广泛. 采用完全独立于编程语言的文本格式来存储和表示数 ...
2021.10.12 lesson06——母婴商场分析
母婴商场的可行性分析 **参考文献一.编写目的二.项目背景三.可行性研究的前提 1.要求 2.目标 3.可行性研究方法四.所建设技术可行性分析 1.系统的简要描述 2.处理流程和数据流程 3. ...
第57课鸡兔同笼-2021.10.12
#include<iostream> using namespace std; int main() {int ji,tu;for(ji=0;ji<=35;ji++)for(tu=0 ...
【每日英文】2021.10.12
derelict adj. (尤指土地或建筑物)荒废的,被弃置的,破旧的:(人)玩忽职守的,不负责任的 n. 无家可归者:乞丐:无业游民:废弃物(尤指废弃船只):(因水位后退)逐渐变干的土地 1.He ...
vue第二次ajax失效,解决VUE-Router 同一页面第二次进入不刷新的问题
最近正好遇到一个问题,修改用户的头像,修改后再进入用户主页,发现改了之后即使数据变了..页面也不会重新渲染... 下面提供几种解决方案来给予大家参考: 1. 可以在刷新的页面定义一个参数, 这样每次都 ...
【小5聊】微信公众平台用户信息相关接口调整，不再返回性别和地区信息（2021.10.21）
应该是为了进一步加强用户隐私信息以及过度的用户性别地区营销而进行的接口调整 2021.10.12 发布通知,平台预计10月20日完成调整,请开发者及时进行调整适配,避免影响相关服务及用户体验各位同行 ...
【树莓派】error: command ‘/usr/bin/arm-linux-gnueabihf-gcc‘ failed with exit code 1（2021年12月)
(2021年12月21日更新解决方案) 解决方法,请输入以下命令: export CFLAGS=-fcommon pip3 install RPi.GPIO 前提树莓派 3b Mac 电脑连接树莓 ...
468、Java框架122 -【Spring + SpringMVC + MyBatis - JSON】 2021.01.27
目录 0.本知识点效果 1.jquery.min.js 2.json中文问题 3.CategoryController 4.submit.html 5.getOne.html 6.getMany.ht ...

2021-10-12 SpringMVC实现JSON数据转换，AJAX失效（解决）

实现JSON数据转换时，在JSP页面使用AJAX失效(已解决)

2021-10-12 SpringMVC实现JSON数据转换，AJAX失效（解决）相关推荐

最新文章

热门文章