前后端的数据交互_前端与后端的数据交互

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

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

 

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

 

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

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

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

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

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

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

 

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

 

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

 

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

 

总结一下：

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

Java学习——前后端数据交互（二）

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

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

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

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

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

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

 

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

Java学习——前后端数据交互（三）

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

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

2、

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

（2）调用方法。

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