• 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>

Spring MVC与jQuery结合使用Ajax技术的更多相关文章

  1. spring mvc 与 jquery ajax

    在 Spring mvc3中,响应.接受 JSON都十分方便. 使用注解@ResponseBody可以将结果(一个包含字符串和JavaBean的Map),转换成JSON. 使用 @RequestBod ...

  2. 比较JSF、Spring MVC、Stripes、Struts 2、Tapestry、Wicket

    2009-06-23 Java Web层框架--JSF.Spring MVC.Stripes.Struts 2.Tapestry和Wicket他们各自的优点和缺点: JSF 优点: ◆Java EE标 ...

  3. 初学者对Spring MVC的认识

    首先是要一定说明的是,这倒是说明是什么?对吧Spring MVC 是SpringFrameWork的后续产品,并且已经融入到Spring Web Flow中同时Spring MVC 分离了控制器,模型 ...

  4. 前端ajax技术之跨域问题解决

    这里我使用jquery框架的ajax技术 <script type="text/javascript" src="Assets/js/jquery.min.js&q ...

  5. spring mvc实现Restful返回xml格式数据

    最近,想在自己的小项目中搭建一个Restful风格的服务接口api,项目用的spring mvc 3,听说spring mvc本身就能十分方便的支持restful的实现,于是查询了下资料,果然非常强大 ...

  6. Spring MVC Controller与jquery ajax请求处理json

    在用 spring mvc 写应用的时候发现jquery传递的[json数组对象]参数后台接收不到,多订单的处理,ajax请求: "}]}]} $.ajax({ url : url, typ ...

  7. spring mvc实现ajax 分页

    使用到的技术: ·spring 3 mvc ·json ·jquery ·java ·mysql 首先,要了解如何在spring mvc中使用json. 以下主要从Dao和View及Controlle ...

  8. 【Spring学习笔记-MVC-5】利用spring MVC框架，实现ajax异步请求以及json数据的返回

    作者:ssslinppp      时间:2015年5月26日 15:32:51 1. 摘要 本文讲解如何利用spring MVC框架,实现ajax异步请求以及json数据的返回. Spring MV ...

  9. Ajax+Spring MVC实现跨域请求（JSONP）JSONP 跨域

    JSONP原理及实现 接下来,来实际模拟一个跨域请求的解决方案.后端为Spring MVC架构的,前端则通过Ajax进行跨域访问. 1.首先客户端需要注册一个callback(服务端通过该callba ...

随机推荐

  1. NOIP2018提高组Day1 解题报告

    前言 关于\(NOIP2018\),详见此博客:NOIP2018学军中学游记(11.09~11.11). 这次\(NOIP\ Day1\)的题目听说很简单(毕竟是三道原题),然而我\(T3\)依然悲剧 ...

  2. "segmentation fault " when "import tensorflow as tf"

    https://github.com/tensorflow/tensorflow/issues/2034

  3. “System.AccessViolationException”类型的未经处理的异常在 System.Data.dll 中发生 其他信息: 尝试读取或写入受保护的内存。这通常指示其他内存已损坏

    用管理员身份运行CMD:netsh winsock reset就可以解决

  4. C#装箱与拆箱的研究

    在对这个问题展开讨论之前,我们不妨先来问这么几个问题,以系统的了解我们今天要探究的主题. 观者也许曾无数次的使用过诸如System.Console类或.NET类库中那些品种繁多的类.那么,我想问的是它 ...

  5. shell脚本，awk结合正则来打印文件里面的内容。

    文件内容如下:key1abc d key2 1.想得到如下结果: abc d 2.想得到如下结果: key1key2

  6. JS控制台的使用

    1.快捷键F12可直接进入控制台(或者单机右键->检查)用于bug调试 2.控制台如图: Elements:表示所有的js元素 Console:常用的有如下几个功能: ①console.log: ...

  7. pycharm在同目录下import，pycharm会提示错误，但是可以运行

    原因是:    pycharm不会将当前文件目录自动加入自己的sourse_path. 解决方案:右键make_directory as-->sources path将当前工作的文件夹加入sou ...

  8. 【前端_js】解决ajax跨域请求数据

    1.ajax发送请求必须遵循同源策略,即请求方和相应方的协议头.域名.端口全部一样.只要三者有一个不一样都视为跨域,浏览器出于安全考虑不允许跨域访问. 解决ajax跨域访问的常用方法: a.使用jso ...

  9. [BZOJ3524]区间问题（主席树）

    Description 给一个长度为n的序列a.1≤a[i]≤n.m组询问,每次询问一个区间[l,r],是否存在一个数在[l,r]中出现的次数大于(r-l+1)/2.如果存在,输出这个数,否则输出0. ...

  10. hadoop完全分布式集群的搭建

    集群配置: jdk1.8.0_161 hadoop-2.6.1 linux系统环境:Centos6.5 创建普通用户  dummy 准备三台虚拟机master,slave01,slave02 hado ...