SpringMVC+Ajax+Maven获取JSON数据并解析

链接：https://pan.baidu.com/s/1GxdnvIbdJBGOnU3ECaPYXA
提取码：2j48
gitee：https://gitee.com/Mylife0506/spring-mvc_-ajax_-weather.git

SpringMVC+Ajax+Maven获取JSON数据并解析

例：

java代码：

1.构建一个客户端

2.构建一个请求对象

3.发送请求,服务器会响应一个JSON的字符串

4.解析 jsonStr–>CityBean？ JSON的帮助类：Jackson

@Controller
public class weatherApp {
    @RequestMapping(value ="/json", method = RequestMethod.POST)
    @ResponseBody//将服务器返回的对象装换为JSON对象响应回去
    public List<CityBean.ResultBeanX.ResultBean> Busjosn(String city) throws IOException {
        //1.构建一个客户端
        CloseableHttpClient client = HttpClients.createDefault();
        //2.构建一个请求对象
        String appkey = "a963edb6227421b3ee3e6bc482efcca6";
        String uri = "https://way.jd.com/jisuapi/weather?";
        HttpGet doGet = new HttpGet(uri + "city=" + city + "&appkey=" + appkey);
        //3.发送请求,服务器会响应一个JSON的字符串
        CloseableHttpResponse response = client.execute(doGet);
        //response.getEntity();获取响应中的一个实体
        String jsonStr = EntityUtils.toString(response.getEntity(), "utf-8");
        //4.解析 jsonStr-->CityBean？ JSON的帮助类：Jackson
        ObjectMapper mapper = new ObjectMapper();
        CityBean cityBean = mapper.readValue(jsonStr, CityBean.class);
        CityBean.ResultBeanX.ResultBean c = cityBean.getResult().getResult();
        List<CityBean.ResultBeanX.ResultBean> list = new ArrayList<CityBean.ResultBeanX.ResultBean>();
        list.add(c);
        return list;//由于使用@ResponseBody注解，这里会将s以JSON格式的字符串返回，十分方便
    }
}

maven

<dependencies>
    <dependency>
    <groupId>org.apache.httpcomponents</groupId>
    <artifactId>httpclient</artifactId>
    <version>4.5.12</version>
    <exclusions>
    <exclusion>
    <artifactId>commons-logging</artifactId>
    <groupId>commons-logging</groupId>
    </exclusion>
    </exclusions>
    </dependency>
    <dependency>
    <groupId>commons-logging</groupId>
    <artifactId>commons-logging</artifactId>
    <version>1.1.3</version>
    </dependency>
    <dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.8</version>
    </dependency>

    <dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-io</artifactId>
    <version>1.3.2</version>
    </dependency>
    <!-- SpringMVC -->
    <dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.3.1</version>
    </dependency>

    <!-- 日志 -->
    <dependency>
    <groupId>ch.qos.logback</groupId>
    <artifactId>logback-classic</artifactId>
    <version>1.2.3</version>
    </dependency>

    <!-- ServletAPI -->
    <dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
    <scope>provided</scope>
    </dependency>
</dependencies>

DispatcherServlet-servlet.xml

    <!--开启注解扫描-->
    <context:component-scan base-package="cn.pdsu"/>
    <!--开放静态资源访问-->
    <mvc:default-servlet-handler/>
    <!--开启注解驱动-->
    <mvc:annotation-driven>
        <!--Json格式乱码处理方式-->
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">

                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
    <mvc:view-controller path="/" view-name="index"></mvc:view-controller>

web.xml

    <!--配置编码过滤器-->
    <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>

    <!--处理HiddenHttpMethodFilter-->
    <filter>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!--配置springMVC的前端控制器DispatcherServlet-->
    <servlet>
        <servlet-name>DispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>DispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
        <!--meta 单标签 用来引入或声明一些内容-->
    <meta charset="UTF-8">

    <!--viewport 视口-->
    <!--width 设置视口宽度-->
    <!--user-scalable 网页是否可以被缩放-->
    <!--initial-scale 网页被加载时，初始的比例-->
    <!--maximum-scale 网页最大的放大比例-->
    <!--minimum-scale 网页最小的缩放比例-->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>天气预报</title>
    <style>
        html{
            height: 100%;
        }
        body{
            /*边界看宽度默认为8,在这里初始值设为零*/
            margin: 0;

            /*高度100%,整个界面*/
            height: 100%;

            /*display: inline-block 转换为行内块元素*/
            /*display: flex 将该标签作为弹性布局的容器*/
            display: flex;

            /*指定容器内的item布局方向*/
            /*row 容器内的item按照x轴(主轴方向布局)*/
            /*column 容器内的item按照y轴(交叉轴)方向布局*/
            /*row-reverse 容器内的item按照x轴反向布局*/
            /*column-reserve 容器内的item按照y轴反向布局*/
            flex-direction: column;

            /*文本居中*/
            text-align: center;

            /*设置背景图片*/
            /*rgb() red green blue  取值0~255*/
            /*rgba() red green blue alpha(取0~1)*/
            /*设置背景色从rgb(14,105,189)到red值从上到下渐变*/
          

            /*主轴项目item的布局方式*/
            justify-content: space-between;

            /*交叉轴的项目item布局方式*/
            /*align-items: ;*/
        }
        header{
            /*字体大小*/
            font-size: 30px;
        }
        img{
            /*width: 设置图片显示宽度，高度会自适应*/
            width: 80px;
        }
        footer{
            /*display: flex 将该标签作为弹性布局的容器*/
            display: flex;
            /*设置item的布局方式*/
            justify-content: space-between;
        }
        footer section{
            /*宽度占比33%*/
            width: 33%;
            border-right: 1px black solid;
        }
    </style>
</head>
<body background="bg3.jpg" >
<script src="${pageContext.request.contextPath}/statics/js/jQuery.js"></script>
<script>
    $(function () {
    	$("#btn").click(function () {
        	var city=$("#city").val();
        	var data={
        		"city":city
        	};
        	var city = "";
        	var weather = "";
        	var winddirect = ""
        	var a = "";
        	var index1 = "";
        	var index2 = "";
        	var index3 = "";
        	var daily1 = "";
        	var daily2 = "";
        	var daily3 = "";
        	var	aqi = "";
        	var	weather2 = "";
            $.post("${pageContext.request.contextPath}/json",data,function (data) {
                console.log(data);
                var html = "";
                var html2= "";
                $.each(data,function(k,v){            	
                	city = city+v.city;
                	weather = weather+v.weather;   
                	winddirect = winddirect+v.winddirect;
                  $.each(data[k], function (k, v) {
                        if(k == 'index'){
                             $.each(v, function (k, object) {
                            	index1=object.iname;
                            	index2=object.ivalue;
                            	index3=object.detail;
                            	  html += "<tr>" +
                                 "<td>" + index1 + "</td>" +
                                 "<td>" + index2 + "</td>" +
                                 "<td>" + index3 + "</td>" + "</tr>" ;
                            	   $("#content").html(html);
                            }) 
                        	
                        }else if(k == 'aqi'){           
                         		 aqi=aqi+v.quality; 
                        } else if(k == 'daily'){
                            $.each(v, function (k, object) {
                            	/* daily = daily+object.date+object.week+object.night; */
                            	daily1=object.date;
                            	daily2=object.week;
                            	
                            	  $.each(v[k], function (k, v) {
                            		 if(k == 'night'){           
                            		 a = v.weather;
                                     } 
                            	 })                             	
                            	  html2 += "<section>" +
                                 "<p>" + daily1 + "<p>" +
                                 "<p>" + daily2 + "<p>" +     
                                 "<p>" + a + "<p>" + " </section>" ;
                            	  $("#footer1").html(html2);
                            })
                        } 
                    })       
                })
                $("#winddirect").text(winddirect);
                $("#aqi").text(aqi);
                $("#city1").text(city);
                $("#weather").text(weather);
            })
        })
    })
</script>
<div align = "left">
城市名称：<input type="text" id="city"  >
<input type="button" id="btn" value="查询">
</div>

<header id = "city1">郑州市</header> 

<!--main 块元素 标记网页中的主要内容-->
<main >
    <h2 id="aqi">轻度污染</h2>
    <h3 id = "weather">晴转多云</h3>
    <p id = "winddirect">东风微风</p>
</main>
<div>
<table width="80%" align="center" border ="1px" cellpadding = "8px" cellspacing = "0px">

<tr>
<th>相关指数</th>
<th>天气</th>
<th>建议</th>
</tr>
    <tbody id="content">
    </tbody>
</table>
</div>
<!--footer 网页中的尾部内容-->
<footer id="footer1">
    <!--section 组件、模块, 块元素-->
    <!-- <section>
        <p>周三</p>
        <p>27~30℃</p>

        <p>阴转小雨</p>
        <p>南风微风</p>
    </section> -->
    
</footer>

</body>
</html>