Springmvc下的jquery,ajax和json的等技术的运用

Posted 2020-10-09

1. 搭建spring mvc环境，导入springmvc开发所需的包

2. web.xml配置
   

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         id="WebApp_ID" version="2.5">
  <welcome-file-list>
    <welcome-file>/index.jsp</welcome-file>
  </welcome-file-list>
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:/applicationContext.xml</param-value>
  </context-param>
  <!-- 配置spring启动listener入口 -->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>

  <filter>
    <filter-name>encodingFilter</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>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <!-- encoding filter for jsp page -->
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  <!-- 配置springmvc启动dispatcherServlet入口 -->
  <!-- 中央控制器 -->
  <servlet>
    <servlet-name>springMVC</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:/spring-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>springMVC</servlet-name>
    <!-- struts习惯使用/*，在springmvc不管用 -->
    <url-pattern>/</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
  <!--这里不加*.js的话，无法通过src=""引用webapp下的文件，其它同理-->
    <servlet-name>default</servlet-name>
    <url-pattern>*.js</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.css</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.jpg</url-pattern>
  </servlet-mapping>
  <display-name>Archetype Created Web Application</display-name>
</web-app>
3.===================spring-mvc.xml的内容（我的放在resources目录下）===================================
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
       xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context"
       xmlns:util="http://www.springframework.org/schema/util" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
            http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd
            http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd
            http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-4.2.xsd">

    <!-- 激活注解模式，如@Controller -->
    <mvc:annotation-driven />
    <!-- 对包中的类的注解进行扫描，创建Bean及自动依赖注入  -->
    <context:component-scan base-package="cn.ys.controller" />

    <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix">
            <value>/</value>
        </property>
        <property name="suffix">
            <value>.jsp</value>
        </property>
    </bean>

</beans>
4.===============编写一个输出json格式的Controller（jkson等jar包）======

package cn.ys.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
/**
* @author 邓聪  E-mail:[email protected]
* @version 创建时间：
* 类说明    输出一个长度为10的json数组
*/
@Controller
public class ShowController {
    @ResponseBody//输出json对象的注解
    @RequestMapping ( "/showTime" )
    public List<String> showTime() {
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
        String format = simpleDateFormat.format(new Date());
        ArrayList<String> strings = new ArrayList<String>();
        for (int i=0;i<10;i++){
            strings.add(format);
        }
        return strings;
    }

}
5.==================index.jsp=============================

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/10/6
  Time: 19:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" >
        $(document).ready(function(){
            //每秒发送一个请求。
            setInterval(function () {
                $.ajax({url:"/showTime",success:function(result){
                    //将返回的json数组（result）的第一个元素添加到id为time的标签文本中
                    $("#time").html(result[0].toString());
                }});
            },1000)
            $("#btn1").click(function(){
                $.ajax({url:"/showTime",success:function(result){

                    $("#time").html(result[0].toString());
                }});
            });
        });
    </script>
</head>
<body>
<h2>Hello World!</h2><br>


当前系统时间：<div id="time" style="font-size: 36px ;color: red">${ requestScope.time }</div>
<input type="button" id="btn1" value="获取时间">

</body>
</html>