Shulou(Shulou.com)06/03 Report--

Editor to share with you how to use SpringMVC+Jquery to achieve Ajax function, I hope you will learn something after reading this article, let's discuss it together!

What is Ajax?

Ajax: asynchronous JavaScript and Json (here XML is changed to Json)

Function: used to complete the function of local refresh of web page (only local refresh is used to modify a small amount of data, no need to reload the whole web page)

Second, a brief introduction to SpringMVC and Jquery

SpringMVC: is a Spring-based sub-framework (MVC framework), more powerful than Spring, this framework is mainly to solve our Controller layer of problems.

MRV model-model User

View-View jsp

Servlet Controller-Controller

JQuery framework: is a programmer to use more JS framework, more powerful.

Philosophy: write less and do more

Advantages: 1. Compatible with all kinds of browsers

two。 Ajax is easy to operate.

Version: 1.x version compatible with IE browser

2.x,3.x.... And later incompatible IE

There are two main routes to update jQuery:

Route one: 1.3, 1.4, 1.4, 1.x. This route is mainly based on compatibility with IE browsers.

Route 2: 2.x _ 3.x. This route is no longer compatible with IE browsers

There is no relationship between the two routes before and after the version.

III. Configuration of SpringMVC

1. Import Jar package

2. Configure the core controller web.xml

< ?xml version="1.0" encoding="UTF-8"?>

< web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 　　xmlns="http://xmlns.jcp.org/xml/ns/javaee" 　　xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" 　　id="WebApp_ID" version="3.1">

< !-- 核心控制器 -->

< servlet>

< servlet-name>

Dispatcher

< servlet-class>

Org.springframework.web.servlet.DispatcherServlet

< /servlet-class>

< init-param>

< !-- SpringMVC的配置文件的位置 -->

< param-name>

ContextConfigLocation

< /param-name>

< param-value>

Classpath:applicationContext-mvc.xml

< /param-value>

< /init-param>

< !--即SpringMVC跟着服务器(tomcat)的启动而启动 -->

< load-on-startup>

one

< /load-on-startup>

< /servlet>

< servlet-mapping>

< servlet-name>

Dispatcher

< /servlet-name>

< !--使用杠(/)更加符合咱们的RESTful风格 -->

< url-pattern>

/

< /url-pattern>

< /servlet-mapping>

< !-- 配置相应的过滤器:角色SpringMVC 的POST请求的乱码问题 -->

< !-- 配置编码方式过滤器,注意一点:要配置在所有过滤器的前面 -->

< filter>

< filter-name>

CharacterEncodingFilter

< filter-class>

Org.springframework.web.filter.CharacterEncodingFilter

< /filter-class>

< init-param>

< param-name>

Encoding

< /param-name>

< param-value>

Utf-8

< /param-value>

< /init-param>

< /filter>

< filter-mapping>

< filter-name>

CharacterEncodingFilter

< /filter-name>

< url-pattern>

/ *

< /url-pattern>

< /filter-mapping>

< /web-app>

3. Configure applicationContext.xml

< ?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:mvc="http://www.springframework.org/schema/mvc" 　　xsi:schemaLocation=" 　　http://www.springframework.org/schema/beans 　　http://www.springframework.org/schema/beans/spring-beans.xsd 　　http://www.springframework.org/schema/context 　　http://www.springframework.org/schema/context/spring-context.xsd 　　http://www.springframework.org/schema/mvc 　　http://www.springframework.org/schema/mvc/spring-mvc.xsd 　　" >

< !-- 扫描包:controller所在位置 -->

< context:component-scan base-package="controller" />

< !--支持SpringMVC特有的注解 -->

< mvc:annotation-driven />

< !-- 对静态资源放行 -->

< mvc:default-servlet-handler />

< !-- 视图解析器：自动为咱们添加前缀与后缀 -->

< bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">

< property name="prefix" value="/WEB-INF/views/" />

< property name="suffix" value=".jsp" />

< /bean>

< !-- 上传解析器 -->

< bean id="multipartResolver" 　　class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

< property name="maxUploadSize">

< !-- 上传文件大小的上限 -->

< value>

2000000000

< /value>

< /property>

< /bean>

< /beans>

4. Controller layer comments

@ Controller

@ RequestMapping ("/ Jquery")

IV. Jquery framework configuration

1. Guide package (because you need to use Json at the front end, you need to import the package of Json)

2. Introduce Jquery into the project

3. Introducing Jquery into html

< !-- 导入jquery,jquery共有两个版本，jquery-1.11.2.js:有完整的源代码，比较占空间，jquery-1.11.2.min.js：是压缩版，比较节约空间 -->

< script type="text/javascript" src="/jquery/jquery-1.11.2.min.js">

5. Front-end code display:

< !DOCTYPE html>

< html>

< head>

< meta charset="UTF-8">

< title>

Insert title here

< /title>

< !-- 导入jquery,jquery共有两个版本，jquery-1.11.2.js:有完整的源代码，比较占空间，jquery-1.11.2.min.js：是压缩版，比较节约空间 -->

< script type="text/javascript" src="/jquery/jquery-1.11.2.min.js">

< /script>

< script type="text/javascript">

Function login () {

/ * *

* submission method 1: the data submission method of the entire form

* /

/ / serialize (): form serialization

Var params = $("# loginForm") .serialize ()

/ / post request, params: request parameter, transfer data to the backend, function (result) {}: callback function, receive the data returned by the backend, and the parameter name (result) is optional.

$.post ("/ Jquery/login", params,function (result) {

/ / because of the combined effect of the SpringMVC framework and the Jquery framework, the returned result retains the original data type

If (result) {/ / login succeeded

_ window.location.href= "http://www.baidu.com" rel=" external nofollow "rel=" external nofollow "

} else {

/ / is exactly equal to document.getElementById ("erSpan") [xss_clean] = result+ ":" + "login failed!"

$("# erSpan") .html (result+ ":" + "login failed!")

}

})

}

Function login2 () {

/ * *

* submission method 2: upload data one by one

* /

/ / the following two sentences are equivalent to document.getElementById ("userName"). Value

Var userName = $("# userName") .val ()

Var pwd = $("# pwd") .val ()

/ / method 1: the key value must be added ""

/ / var params = {"userName": userName, "pwd": pwd}

/ / method 2:

Var params = "userName=" + userName+ "& pwd=" + pwd

/ / send the request to the background

/ / if you want to pass parameters, just pass them in the second parameter.

$.post ("/ Jquery/login", params,function (result) {

/ / because of the combined effect of the SpringMVC framework and the Jquery framework, the returned result retains the original data type

If (result) {

_ window.location.href= "http://www.baidu.com" rel=" external nofollow "rel=" external nofollow "

} else {

/ / is exactly equal to document.getElementById ("erSpan") [xss_clean] = result+ ":" + "login failed!"

$("# erSpan") .html (result+ ":" + "login failed!")

}

})

}

< /script>

< /head>

< body>

< span id="erSpan">

< /span>

< form id="loginForm" action="/Jquery/login" method="post">

User name:

< input type="text" name="userName" id="userName" />

< br />

Password

< input type="text" name="pwd" id="pwd" />

< input type="button" value="ajax表单提交" onclick=login()" />

< input type="button" value="ajax单独提交" onclick=login2()" />

< /form>

< /body>

< /html>

6. Controller layer code display:

Package controller

Import org.springframework.stereotype.Controller

Import org.springframework.web.bind.annotation.RequestMapping

Import org.springframework.web.bind.annotation.ResponseBody

@ Controller

@ RequestMapping ("/ Jquery")

Public class JqueryController {

/ *

* Note: if the path to access login.html on the browser is: IP: Port number / login.html, and here the path to access the login method is directly:

/ login, there is no path in front, such as @ RequestMapping ("/ Jquery"), there will be a 406 error.

* /

@ RequestMapping ("/ login")

@ ResponseBody// plus this comment, return will no longer jump to the page, just return data (json)

Public Boolean login (String userName,String pwd) {

System.out.println (userName+ ":" + pwd)

If ("Meteor" .equals (userName) & & "456" .equals (pwd)) {

Return true

}

Return false

}

}

After reading this article, I believe you have a certain understanding of "how to use SpringMVC+Jquery to achieve Ajax function". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.