Servlet实现前后端json数据交互，前端js传输数据，后端fastjson解析json数据，以及Tomcat部署和jquery的部署

Posted 2021-12-07 卟言呢

最近写了一个小的web练习项目，后端接受前端传来的json数据，并返回相应的信息

要求如下：

编写一个用于计算加权平均数的Servlet，以Post方式接收如下json格式参数

{

       "nums": [1, 2, 3, 4],

       "weight": [3, 1, 4, 5],

       "accuracy": 2

}

nums表示若干个数，weight表示这些数的权重，accuracy表示保留小数点后多少位(四舍六入五成双)。

首先创建一个web项目

部署tomcat，这个在idea中只有完整版才有，社区版是找不到这个Tomcat Server的

项目创建完了要在run->Edit Configurations中新建一个tomcat，选择自己tomcat下载路径即可

 

 然后创建一个类继承自HttpServlet

接着在web.xml中部署文件

web.xml部署文件

形式如下

servlet-mapping 中写的是虚拟目录

由于是前后端交互的，所以我们先编写前端的html代码再来到后端处理数据

html端代码如下：

在这个html界面中我们使用了jquery的库，可以使用各大厂商现成的库，也可在在官网复制一份然后创建一个js文件

这里采用的是复制的方法：

引用jquery库，以及$符号未定义的解决方法：

在官网找到

点进去将内容全部复制，然后回到idea，在webapp下创建一个js文件，将所有内容复制过去即可，

在使用的时候就可以

这样来应用jquery库，如果还是出现无法引用的问题，可以尝试选中src按Alt+Enter来查看提示

---

那么现在html界面已经写完了，我们要在后端对前端发送过来的数据进行处理，

因为用到了Servlet和Fastjson，我们需要在lib引入两个jar包

 主要代码如下

 中间的计算我们跳过，直接到最后的返回json上来，

返回数据主要使用PrintWriter这个类

我们通过response来返回这个类的主体

然后对JSONObject添加数据之后

就可以使用printWriter中的write方法来返回数据到前端

 

其中可能会出现一个运行时的异常，java.lang.NoClassDefFoundError:com/alibaba/fastjson/JSONOBject

有一个解决方法是复制Tomcat->lib->servlet对应的jar包到jdk->jre->lib->ext中，然后重启ide即可

附一张工程目录图

---

最后我们来看一看运行效果

 

F12查看返回数据