大二初识AJAX+JSON(JSP+Servlet)

    最近在B站看了“遇见狂神说”和其他up主的“Java Web”中的AJAX,JSON内容，写的当中还是遇到了不少问题，将这两个视频做一下小的总结。
两个视频链接
“https://www.bilibili.com/video/BV1Pt411u7R3”+“https://www.bilibili.com/video/BV1Kt411u7BV”
“https://www.bilibili.com/video/BV18s411u7EH”
    首先说明一下，我们学校还没学spring相关内容（狂神用的是spring），只学了JSP，所以有点不适用，而且他传参传的不是JSON格式的数据，后面JSP的视频呢个转JSON引用的包有些过时，所以我大概结合了一下。
只写一些关键代码：
maven：（转JSON格式）

<!-- jackson -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.11.4</version>
    </dependency>

JQuery：（直接从JQuery官网下载）

后端

@WebServlet(urlPatterns = "/weather")
public class WeatherServlet extends HttpServlet {
    @Override
    public void init(ServletConfig config) throws ServletException {
        super.init(config);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //需要一个jackson的对象映射器，就是一个类，使用它可以直接将对象转化为json字符串
        ObjectMapper mapper = new ObjectMapper();
        //如果没有对象，可以直接out.print({"xx":"xx"})
        Suggestion suggestion = new Suggestion("我", "1", "1", "1", "1");
        String str = mapper.writeValueAsString(suggestion);
        //输出流
        PrintWriter out = resp.getWriter();
        //获取数据
        String mask = req.getParameter("mask");
        if ("1".equals(mask)) {
            out.print(str);
        }
        out.close();
    }
}

前端
（这里我当时遇见一个小坑，起初这些是在form里得，我事件绑定的是submit按钮，一直传不了参。因为form里一点submit页面就会刷新，即使没有action地址，AJAX是异步传输，也就是不刷新页面，这样肯定没有效果。）

<div class="input-content">
                <div>
                    <input type="text" autocomplete="off" placeholder="气温" name="temperature" required maxlength="10"/>
                </div>
                <div style="margin-top: 16px">
                    <input type="text" autocomplete="off" placeholder="天气" name="forecast" required maxlength="10"/>
                </div>
                <div style="margin-top: 16px">
                    <input type="text" autocomplete="off" placeholder="风力" name="wind" required maxlength="10"/>
                </div>
                <div style="margin-top: 16px">
                    <input type="text" autocomplete="off" placeholder="空气" name="air_quality_index" required maxlength="15"/>
                </div>
                <div style="margin-top: 16px">
                    <button class="enter-btn" id="btn" onclick="a1()">提交</button>
                </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
            function a1() {
                $.getJSON(
                	//目标地址
                    "/weather",
                    //前端给后端的值
                    {"mask":"1", "other":2},
                    //后端返回的结果，result是返回的值，也就是out.print的值
                    function (result) {
                        //eval确保result转为JSON
                        var jsonSuggestion = eval(result);
                        console.log(jsonSuggestion.mask);
                    }
                )
            }
    </script>