• 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. Aizu 2170 Marked Ancestor（并查集变形）

    寻找根节点很容易让人联想到DisjointSet,但是DisjointSet只有合并操作, 所以询问离线倒着考虑,标记会一个一个消除,这时候就变成合并了. 因为询问和查询的时间以及标记生效的时间有关, ...

  2. UVALive 4987 EvacuationPlan（dp，贪心）

    在所有避难所都有至少一只队伍的情况,总移动距离最小. 把队伍的位置和人都排序. 会发现,对于最后一个队伍i和最后一个避难所j, Case 1:pos[j]>=pos[i],那么i是距离j最近的一 ...

  3. 2018.6.9 MyEclipse连接Oracle数据库方法及步骤

    在windows栏找到showXXX 然后选择最后一个others 找到Database 然后选择oracle 接着就是jar包的问题了 这个不同于mysql oracle如果装在了本机上面可以在文件 ...

  4. opencv与灰度图

    https://blog.csdn.net/qq_32211827/article/details/56854985 首先,灰度图可以是一个通道存成图片,也可以是3个通道存成图片,3个通道存成图片,其 ...

  5. springmvc如何获取参数

    请参考这篇文章, 写得比较全面. https://www.cnblogs.com/xiaoxi/p/5695783.html

  6. windows2012服务器搭建mongodb并设置远程访问

    因为python脚本需要用到mongodb,而且需要本地查看数据库,所以就在腾讯云的windows服务器上部署了mongodb服务器,因为网上大部分教程是针对linux的自己搜索走了很多坑,这里记录下 ...

  7. git常用命令以及速查命令

    工作中使用的是git,所以写这个只是为了加深自己的记忆,提高熟练度 共勉~ git 主要命令 要关联一个远程库,使用命令git remote add origin git@server-name:pa ...

  8. pycharm永久激活记录

    由于上一年安装的pycharm激活时是用的激活码,有期限的,一直到今年5月4日过期,这两天顺便把版本也更新到最新,一直用的free版,到今天提醒我free快到期了,所以才狠下心来去找解决方案,目前已经 ...

  9. docker部署Ceph分布式存储集群

    1.环境准备 3台virtualbox虚拟机,用来安装ceph集群,已用docker-machine安装上了docker,每台虚拟机虚拟创建一个5G的硬盘,用于存储osd数据,例如:/dev/sdb ...

  10. mysql--连接查询(内外连接)

    连接查询又称多表查询,查询到的字段来自于多个表中的数据. 一. 连接查询的分类和语法 1.分类 按标准分: 92标准:只支持内连接 99标准:支持内连接和.外连接和全外连接 功能进行分类: 内连接:i ...