前后端的数据交互

痛定思痛。 2022-05-17 10:25 371阅读 0赞

# [Java学习——前后端数据交互（一）][Java] #

当前的结果是提交之后js内有响应。不知道原因在哪个地方，下面是当前了解的一些知识。

1、在html页面要链接到js页面，要有个这样的东西（html页面

![Center][]

2、在js页面要定义controller层的url地址，就是requestMapping后面的内容（js页面）

![Center 1][]

3、分为获取数据和提交数据（js页面）

首先是获取数据，shopInfoUrl是定义的conroller层的url地址，data是转换为json格式的字符串，通过$.getJSON来获取

![Center 2][]

其次是提交数据，为提交提供一个响应

![Center 3][]

然后在获取页面的数据，并转换为JSON格式。通过new FormData(), formData.append('shop',shopImg)，将数据封装到对象里面

![Center 4][]

最后是提交数据，通过$.ajax

![Center 5][]

4、调用定义的方法（js页面）

![Center 6][]

5、后台获取数据，通过Request.getParameter()来获取JSON格式的字符串。（Java Controller层）

![Center 7][]

6、将JSON格式的字符串，转为原来的格式，通过ObjectMapper类的readValue方法来讲JSON格式的字符串转为对象

![Center 8][]

总结一下：

Java前后端数据的交互，不仅是获取还是提交，需要转换为JSON格式的字符串。比如从前端传递到js需要转换为JSON格式，通过加上@ResponseBody的注解，返回类型为Map;从前端传递到后端，需要new FormData()。在进行传递。

# [Java学习——前后端数据交互（二）][Java 1] #

**以下是前端页面数据传递后Java后台。**

前段时间在前行前后端数据交互的时候，点击提交没有响应。原因是因为下面这个地方出错了。js目录的指向不对。

![Center 9][]

这里最前面的一个表示该文件所属的文件夹的上一级目录的父目录。如果是两级的话则加两个..表示上两级的父目录。

接着又是一步步调试了，在每一个步骤下面使用alert()方法。使用这种方式在学习的初期，能有效地定位错误出现在哪个地方。

![Center 10][]

接着是Java后台数据的接收，接受需要将Json格式的数据转换为Java能够识别的数据。因此要用到ObjectMapper类的readValue()方法，具体使用如下图

![Center 11][]

获取之后需要做一些验证，打印在控制台上。第一列是将json格式的转换后的数据，第二个时json格式的数据。

![Center 12][]

总结：从前端页面传递数据到Java后端。需要Java后端的url，传递方式get/post。需要将json格式的数据转换为Java能够识别的数据。

# [Java学习——前后端数据交互（三）][Java 2] #

**以下是Java后端的数据传递到前端页面**

**1、在Java后端写上url地址，然后加上@ResponseBody注解，目的是为了将返回的数据转为json格式。**

![Center 13][]

2、

（1）在js页面定义Java后台方法的url；

（2）调用方法。

方法内：注意通过     data.定义的对象名     的方式来获取Java端传递过来的对象

![Center 14][]

[Java]: https://blog.csdn.net/qq_28695495/article/details/78887092
[Center]: /images/20220517/e09cdc04359d4898b7f7ba6643f8dbf9.png
[Center 1]: /images/20220517/742d3fa12a124a5d98e73ed727514eb3.png
[Center 2]: /images/20220517/0722d527f0ba4dbda5ab97a8d0a253f2.png
[Center 3]: /images/20220517/841918db82314c7388478ef24d8ddf7a.png
[Center 4]: /images/20220517/033d3d6c92b444399bb066e512718770.png
[Center 5]: /images/20220517/d0ab752abc87497f830417520d9b70ed.png
[Center 6]: /images/20220517/9ecd1ab1b7b5421590bb7ff13d03bfaf.png
[Center 7]: /images/20220517/4db1eca86ccf45189874262f28cb5c51.png
[Center 8]: /images/20220517/ef65ed8c1edd47a1bece138d9e0d5a07.png
[Java 1]: https://blog.csdn.net/qq_28695495/article/details/78936197
[Center 9]: /images/20220517/7f3b19a2a8df46a4a9b3f04c4df6f854.png
[Center 10]: /images/20220517/f1da8a6720fb4ced80bd171f8691d0a4.png
[Center 11]: /images/20220517/659731a64c494114b63f9329a2dd61ab.png
[Center 12]: /images/20220517/48daa22877a848f9b1d3e19ef16ce2a8.png
[Java 2]: https://blog.csdn.net/qq_28695495/article/details/78936852
[Center 13]: /images/20220517/dc9eeb2d44a54115837038ee49d85c93.png
[Center 14]: /images/20220517/ee72000c848f4440bbf33708a83f1dc7.png