zoukankan      html  css  js  c++  java
  • Spring MVC与jQuery结合使用Ajax技术

    • gradle配置
    group 'org.zln.webDemo'
    version '1.0-SNAPSHOT'
    
    apply plugin: 'java'
    apply plugin: 'jetty'
    
    sourceCompatibility = 1.8
    
    repositories {
        mavenCentral()
    }
    
    dependencies {
    ......
        compile group: 'com.fasterxml.jackson.core', name: 'jackson-databind', version: '2.8.1'
    .....
    
    }

    注意:jackson-databind 是必须的,否则无法将返回转换成JSON格式

    • web.xml
    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
             version="3.1">
    ......
        <!--③ 配置Spring MVC地址映射-->
        <servlet>
            <servlet-name>webDemo</servlet-name>
            <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
            <init-param>
                <param-name>contextConfigLocation</param-name>
                <param-value>/WEB-INF/springServlet/applicationContext-*-servlet.xml</param-value>
            </init-param>
            <load-on-startup>2</load-on-startup>
        </servlet>
        <servlet-mapping>
            <servlet-name>webDemo</servlet-name>
            <url-pattern>*.html</url-pattern>
        </servlet-mapping>
        <servlet-mapping>
            <servlet-name>webDemo</servlet-name>
            <url-pattern>*.do</url-pattern>
        </servlet-mapping>
        <servlet-mapping>
            <servlet-name>webDemo</servlet-name>
            <url-pattern>*.action</url-pattern>
        </servlet-mapping>
        <servlet-mapping>
            <servlet-name>webDemo</servlet-name>
            <url-pattern>*.json</url-pattern>
        </servlet-mapping>
    
        <welcome-file-list>
            <welcome-file>index.jsp</welcome-file>
        </welcome-file-list>
    
    </web-app>

    注意:配置了json也作为请求的后缀,专门用于json来传递数据的Ajax请求

    • 前台界面
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
    <%
        String homePage = request.getContextPath();
    %>
    <!DOCTYPE HTML>
    <html>
    <head>
        <title>Title</title>
        <script type="text/javascript" src="<%=homePage%>/jsLib/jquery-3.1.0.min.js"></script>
        <meta charset="UTF-8"/>
        <script type="text/javascript">
            $(function(){
                $("#bt1").click(function(){
                    $.getJSON(
                            "<%=homePage%>/module/ajaxGetTime.json"
                            ,{key:"参数123"}
                            ,function(data){
                                var $timeDiv = $("#time");
                                $timeDiv.html(data.nowTime);
                            }
                    )
                })
            })
        </script>
    </head>
    <body>
        ajax测试首页<br/>
        <input type="button" id="bt1" value="获取当前时间"/><br/>
        <div id="time"></div>
    </body>
    </html>

    注意:请求后缀一定要是json啊(否则又要去配置其他东西了,麻烦)

     这里使用了getJSON函数,其他函数如 $.post也行

    • 控制层
        @RequestMapping(value = "/ajaxGetTime.json")
        @ResponseBody
        public Map<String,String> ajaxGetTime(HttpServletRequest request){
            logger.info("获取参数:"+request.getParameter("key"));
            Map<String,String> map = new HashMap<>();
            String timeStr = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date());
            map.put("nowTime",timeStr);
            logger.info("准备传递给前台的数据:"+map);
            return map;
        }
    • Spring MVC 的配置
    <?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:context="http://www.springframework.org/schema/context"
           xmlns:p="http://www.springframework.org/schema/p"
           xmlns:mvc="http://www.springframework.org/schema/mvc"
           xsi:schemaLocation="http://www.springframework.org/schema/beans
           http://www.springframework.org/schema/beans/spring-beans-4.1.xsd
           http://www.springframework.org/schema/context
           http://www.springframework.org/schema/context/spring-context-4.1.xsd
           http://www.springframework.org/schema/mvc
           http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd">
        <!--这个包下的,所有加过特殊注解的类,都被Spring管理-->
        <context:component-scan base-package="org" resource-pattern="**/*Controller.class"/>
        <mvc:annotation-driven/>
        <!--静态资源-->
        <!--<mvc:resources mapping="/css/**" location="/WEB-INF/css/"/>-->
        <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
              p:viewClass="org.springframework.web.servlet.view.JstlView"
              p:prefix="/WEB-INF/jsp/"
              p:suffix=".jsp"/>
    </beans>
  • 相关阅读:
    JQuery validate.js 在ajax提交form时如何触发
    Ajax回调函数返回的中文字符串乱码问题
    对HTML5校验 自定义验证信息
    Mybatis + Mysql 插入数据时中文乱码问题
    javac 导入第三方jar包
    如何在VISIO 2010/2013 中关闭Shape protection(图形保护)
    关于 XMLHttpRequest对象的onreadyStateChange方法
    Centos7通过Docker安装Sentry(哨兵)
    Entity framework 预热
    Xamarin.Android Binding篇
  • 原文地址:https://www.cnblogs.com/sherrykid/p/5721874.html
Copyright © 2011-2022 走看看