SpringMVC+Jquery实现Ajax功能

程序员文章站 2022-03-07 16:52:49

一、什么是ajax? ajax:异步的javascript和json（这里xml改为了json)；作用：用于完成网页局部刷新功能（修改少量数据只用局部刷新，不...

一、什么是ajax?

ajax:异步的javascript和json（这里xml改为了json)；

作用：用于完成网页局部刷新功能（修改少量数据只用局部刷新，不用再整个网页重新加载）；

二、springmvc和jquery的简单介绍

springmvc：是基于spring的一个子框架(mvc框架)，功能强于spring，这个框架主要是解决咱们controller这一层的问题。

m：model-模型user
v：view-视图jsp
c：controller-控制器servlet

jquery框架：是一个程序员使用比较多的js框架，功能较为强大。
理念：写的更少，做的更多
优点：1.兼容各种浏览器
　　　2.操作ajax很简单

版本：1.x 版本兼容ie浏览器
2.x，3.x....及之后的不兼容ie

jquery的更新主要有两个路线：
路线一：1.3,1.4,1.x.........这个路线主要是坚持于兼容ie浏览器
路线二：2.x，3.x.......这个路线不再兼容ie浏览器
两路线并没有版本前后的关系

三、springmvc的配置

1、导入jar包

SpringMVC+Jquery实现Ajax功能

2、配置核心控制器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-name>
  <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>1</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-name>
  <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、配置 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层注解

@controller @requestmapping("/jquery")

四、jquery框架配置

1、导包（因为在前端需要用到json,所以需要导入json的包）

SpringMVC+Jquery实现Ajax功能

2、项目中引入jquery

SpringMVC+Jquery实现Ajax功能

3、html中引入jquery

<!-- 导入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>

五、前端代码展示：

<!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(){
  /**
  * 提交方式一：整个表单的数据提交方式
  */
   //serialize():表单序列化
  var params = $("#loginform").serialize();
  //post请求，params:请求参数，将数据传到后端，function(result){}:回调函数，接收后端返回的数据，参数名（result）可随便取
　　　　　$.post("/jquery/login",params,function(result){
   //因为springmvc框架和jquery框架的联合作用，使得传回来的result保留了原有数据类型
   if(result){//登录成功
    window.location.href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" ;
   }else{
    //完全等于 document.getelementbyid("erspan").innerhtml = result+":"+"登录失败！";
    $("#erspan").html(result+":"+"登录失败！");
   }
  })
 }
 function login2(){
  /**
  *提交方式二：一个个数据上传的方式
  */
  //以下两句相当于 document.getelementbyid("username").value;
  var username = $("#username").val();
  var pwd = $("#pwd").val();
  //写法一：key值必须要加"";
  //var params = {"username":username,"pwd":pwd};
  //写法二：
  var params = "username="+username+"&pwd="+pwd;
  //发送请求到后台
  //如果要传参，直接在第二个参数中传就可以了
  $.post("/jquery/login",params,function(result){
   //因为springmvc框架和jquery框架的联合作用，使得传回来的result保留了原有数据类型
   if(result){
    window.location.href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" 
   }else{
    //完全等于document.getelementbyid("erspan").innerhtml = result+":"+"登录失败！";
    $("#erspan").html(result+":"+"登录失败！");
   }
  }) 
 }
</script>
</head>
<body>
 <span id="erspan"></span>
 <form id="loginform" action="/jquery/login" method="post">
  用户名：<input type="text" name="username" id="username" /> <br />
  密码<input type="text" name="pwd" id="pwd" /><br />
  <input type="button" value="ajax表单提交" onclick="login()" />
  <input type="button" value="ajax单独提交" onclick="login2()" />
 </form>
</body>
</html>

六、controller层代码展示：

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 {
 /*
  * 注意：如果在浏览器*问login.html的路径为：ip:端口号/login.html,而这里访问login方法的路径直接为：
   /login,前面没有任何路径，如@requestmapping("/jquery")，则会出现406错误
 */
 @requestmapping("/login")
 @responsebody//加上这个注解，return 就不会再跳转页面，只是返回数据（json）
 public boolean login(string username,string pwd){
  system.out.println(username+":"+pwd);
  if("流星".equals(username) && "456".equals(pwd)){
   return true;
  }
  return false;
 }
}

总结

以上所述是小编给大家介绍的springmvc+jquery实现ajax功能 ,希望对大家有所帮助

SpringMVC+Jquery实现Ajax功能

Android实现短信加密功能（发送加密短信、解密本地短信）

php查询操作实现投票功能

JavaScript实现页面中录音功能的方法

怎样使用两行代码实现博客园打赏功能

java实现的连接数据库及模糊查询功能示例

Java基于JDBC实现事务，银行转账及货物进出库功能示例

iOS中UITableView Cell实现自定义单选功能

Android编程实现ListView滚动提示等待框功能示例

SpringBoot + SpringSecurity 短信验证码登录功能实现

Android PraiseTextView实现朋友圈点赞功能