spring-mvc常用的配置+Ajax回顾+异步验证账户密码

KaiKai-G

于 2020-12-23 13:54:18 发布

阅读量640

点赞数

分类专栏： SSM 前端文章标签： ajax json springmvc

本文链接：https://blog.csdn.net/kaikai_gege/article/details/111588074

版权

SSM 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

Mvc

零、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: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
       https://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 1、自动扫描包，让指定包下的注解生效,由IOC容器统一管理 -->
    <context:component-scan base-package="com.kai"/>

    <!-- 2、视图解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          id="internalResourceViewResolver">
        <!-- 前缀 -->
        <property name="prefix" value="/WEB-INF/jsp/" />
        <!-- 后缀 -->
        <property name="suffix" value=".jsp" />
    </bean>

    <!--3、静态资源过滤一些 jsp,html,能过通过-->
    <mvc:default-servlet-handler/>

    <!--4、1处理器映射器、处理器适配器：支持mvc注解驱动
        4、2Json返回的编码格式：处理json乱码-->
    <mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="UTF-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

</beans>

下图中的一定要写，json乱码问题和静态资源过滤都需要
在这里插入图片描述

一、ajax失去焦点发送请求

1、先下载再导入jquery的包

    <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>

2、编写input标签设置onblur失去焦点事件，然后script内写事件ajax请求

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
    <script>
        function o() {
            $.post({
                url:"${pageContext.request.contextPath}/ajax1", //请求的url
                data:{"name":$("#name").val()}, //请求携带的数据
                success:function (data,status) { //返回来的数据
                    console.log("status:"+status);
                    alert(data);
                }
            });
        }

    </script>
</head>

<body>
    <%--失去焦点发送请求--%>
    用户:<input type="text" id="name" onblur ="o()">
</body>
</html>

controller层

package com.kai.Ajax;

import com.kai.pojo.User;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

//此类下的方法全部返回字符串
@RestController
public class AjaxController {
    @RequestMapping("/ajax1")
    public String ajax1(@RequestParam("name") String name, Model model){
        System.out.println(name);
        return name;
    }
}

二、ajax点击后发送请求并标签内容

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax2</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>

    <script>
        $(function () {
            //设置按钮的点击事件
            $("#but").click(function () {
                $.post("${pageContext.request.contextPath}/ajax2",function (data) {
                    var html = "";
                    for (var i = 0; i <data.length; i++) {
                       html +="<tr>"+
                           "<td>"+data[i].name+"</td>"+
                           "<td>"+data[i].age+"</td>"+
                           "<td>"+data[i].gender+"</td>"+
                           "</tr>"
                    }
                    $("#content").html(html);
                });
            });
        })
    </script>
</head>
<body>

    <input type="button" id="but" value="获取数据">

    <table width="80%" align="center">
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>

        <tbody id="content">
        </tbody>

    </table>
</body>
</html>

package com.kai.Ajax;

import com.kai.pojo.User;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

//此类下的方法全部返回字符串
@RestController
public class AjaxController {

    @RequestMapping("/ajax2")
    public List<User> ajax2(){
        List<User> users = new ArrayList<User>();
        users.add(new User("小凯",2,"男"));
        users.add(new User("小网",22,"女"));
        users.add(new User("小里",32,"女"));
        return users;
    }
}

三、ajax异步验证账户密码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax3</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>

    <script>
        function user() {
            $.post({
                url:"${pageContext.request.contextPath}/ajax3",
                data:{"user":$("#username").val()},
                success:function (data) {
                    if (data == "ok"){
                        $("#user").css("color","green");
                        $("#user").html(data);
                    }else{
                        $("#user").css("color","red");
                        $("#user").html(data);
                    }
                }
            })
        }
        function psw() {
            $.post({
                url:"${pageContext.request.contextPath}/ajax3",
                data:{"psw":$("#password").val()},
                success:function (data) {

                    if (data == "ok"){
                        $("#psw").css("color","green");
                        $("#psw").html(data);
                    }else{
                        $("#psw").css("color","red");
                        $("#psw").html(data);
                    }
                }
            })
        }
    </script>

</head>

    <div>
        <%--onblur失去焦点--%>
        用户名:<input type="text" id="username" onblur="user()"> <span id="user"></span> <br>
    </div>

    <div>
        密码  :<input type="text" id="password" onblur="psw()"> <span id="psw"></span>

    </div>

</body>
</html>

package com.kai.Ajax;

import com.kai.pojo.User;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

//此类下的方法全部返回字符串
@RestController
public class AjaxController {

    @RequestMapping("/ajax3")
    public String ajax3(String user,String psw){
        String msg = "";
        if (user!=null){
            if (user.equals("kai")){
                msg = "ok";
            }else {
                msg = "用户名错误";
            }
        }
        if (psw!=null){
            if (psw.equals("123")){
                msg = "ok";
            }else{
                msg = "密码错误";
            }
        }
        return msg;
    }

}

KaiKai-G

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
spring-mvc常用的配置+Ajax回顾+异步验证账户密码

这里写目录标题零、spring-mvc常用的配置一、ajax失去焦点发送请求二、ajax点击后发送请求并标签内容三、ajax异步验证账户密码零、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"
复制链接

扫一扫