• 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. IOS给图片增加水印(图片、文字)

    在网上发现很多人使用 CGContextDrawImage(context,CGRectMake(0,0,self.width,self.height),[image CGImage]); //原图  ...

  2. iOS解析新浪微博的@##以及URL链接并展示

    最近在做一个跟微博相关的应用.其中涉及到了对微博中@.##以及URL链接的解析与展示.分享一下个人处理的方式,希望对需要的人有所帮助. 最终的展现效果: 首先,第一步是你得从纯文本中找到它们.毫无疑问 ...

  3. ActiveX插件的Z-Index属性无效问题解决

    在Web开发中我们经常通过z-index设置多个元素之间的层叠关系,这种方式在多数情况下很有效,但是如果遇到有窗体元素时这种方式常常显得无能为力,今天我们就一块看一下如何有效的解决这个问题. 在Web ...

  4. World Wind Java开发之十二——加载粗制三维模型（ExtrudedPolygon）（转）

    ww可以根据DLG图批量生成假三维模型,这对于小区等特征相似的建筑物模型的构建是非常有用的.下面来看如何一步步实现假三维模型的加载: 1.Shp文件的制作 首先在arcmap下数字化几个建筑物,并新建 ...

  5. bzoj AC倒序

    Search GO 说明:输入题号直接进入相应题目,如需搜索含数字的题目,请在关键词前加单引号 Problem ID Title Source AC Submit Y 1000 A+B Problem ...

  6. 【BZOJ2242】[SDOI2011] 计算器（数学模板三合一）

    点此看题面 大致题意: 让你完成三种操作:求\(Y^Z\%P\)的值,求满足\(XY\equiv Z(mod\ P)\)的最小非负整数\(X\),求满足\(Y^X\equiv Z(mod\ P)\)的 ...

  7. Problem K: 搜索基础之棋盘问题

    Problem K: 搜索基础之棋盘问题 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 92  Solved: 53[Submit][Status][W ...

  8. python_63_装饰器6

    #decorator意思:1.装饰器 2.语法糖 import time user,passwd='qi','123' def auth(func): def wrappper(*args, **kw ...

  9. kubernetes-控制器Deployment和DaemonSet（八）

    Pod与controllers的关系 •controllers:在集群上管理和运行容器的对象•通过label-selector相关联•Pod通过控制器实现应用的运维,如伸缩,升级等 控制器又称工作负载 ...

  10. 最近面试前端岗位，汇总了一下前端面试题（JS+CSS）

    JavaScript 运行机制 1. 单线程(用途决定,需要与用户互动以及操作DOM) 2. 分同步任务(主线程)与异步任务(任务队列),只有任务队列通知主线程某个任务可以执行了,该 任务才会进入主线 ...