SpringMVC与Ajax交互

最新推荐文章于 2024-09-20 18:15:48 发布

穆呈祥

最新推荐文章于 2024-09-20 18:15:48 发布

阅读量1.2k

点赞数 1

文章标签： SpringMVC AJAX JQuery

本文链接：https://blog.csdn.net/qq_34265010/article/details/82730009

版权

首先需要加入三个jar包，SpringMVC的版本是4.1，这三个包可以用，如果是其他版本的SpringMVC可能不管用，需要换其他版本的这三个jar包
这里写图片描述
每输入一个字符就使用ajax请求一个url

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>SpringMVC</title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
           $("#username").keyup(function(){
               var username=$(this).val();
               $.ajax({
                   type:"post",
                   url:"hello.do",
                   async:false,
                   data:{
                       "username":username
                   },
                   success:function(data){
                       $.each(data,function(index,item){
                           if (item.flag){
                               $("#unTip").text("用户名可以使用").css({"color":"green"});
                           }else {
                               $("#unTip").text("用户名已存在　").css({"color":"red"});
                           }  
                       });
                   },
                   error:function(){
                       alert("网络错误请稍后重试");
                   }
               });
           });
            $("#confirmPassword,#password").keyup(function(){
                var password=$("#password").val();
                var confirmPassword=$("#confirmPassword").val();
                if (password==confirmPassword){
                    $("#cpTip").text("两次密码相同　").css({"color":"green"});
                }else {
                    $("#cpTip").text("两次密码不同　").css({"color":"red"});
                }
            });
        });
    </script>
</head>
<body>
<div align="center">
<form>
    <table>
        <tr>
            <td><label>用户名:　<input type="text" id="username" autocomplete="off"/></label></td>
            <td id="unTip">　　　　　　　</td>
        </tr>
        <tr>
            <td><label>密　　码:<input type="password" id="password"/></label></td>
            <td></td>
        </tr>
        <tr>
            <td><label>确认密码:<input type="password" id="confirmPassword"/></label></td>
            <td id="cpTip">　　　　　　　</td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="submit" value="注册"/></td>
        </tr>
    </table>
</form>
</div>
</body>
</html>

web.xml需要加入的配置

<servlet>
  <servlet-name>SpringMVC</servlet-name>
  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  <init-param>
  <param-name>contextConfigLocation</param-name>
  <param-value>classpath:springmvc-servlet.xml</param-value>
  </init-param>
  <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
  <servlet-name>SpringMVC</servlet-name>
  <url-pattern>/</url-pattern>
  </servlet-mapping>

springmvc-servlet.xml的配置

<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-4.1.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd">                    
    <mvc:default-servlet-handler />
    <context:component-scan base-package="com.controller"/>
    <mvc:annotation-driven />
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" 
            id="internalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/" />
        <property name="suffix" value=".jsp" />
    </bean>
</beans>

控制器的代码，与ajax交互的控制器的类需要加入@ResponseBody，类的返回值就是需要传递的json数据

package com.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class testSpringMVCAjax {
    @RequestMapping(value="hello.do")
    @ResponseBody
    public List<Map<String, Object>> testJson(String username){
        List<Map<String, Object>> list=new ArrayList<>();
        Map<String, Object> map=new HashMap<>();
        boolean flag=true;
        String message="用户名可以使用";
        if(username.equals("muchengxiang")) {
            flag=false;
            message="用户名已存在";
        }
        map.put("flag", flag);
        map.put("message", message);
        list.add(map);
        return list;
    }
}