SpringMVC-AJAX

分类：SpringMVC作者：编程之家用户

AJAX

目录

1. AJAX简介

AJAX = Asynchronous JavaScript and XML (异步的JavaScript和XML)

Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术

增强B/S的体验性(Browser/Service)

B/S:未来的主流,并且会爆发式持续增长

产品链:H5 + 网页 + 客户端 + 手机端 (Android + IOS) + 小程序

请求的类型: xhr

2. 利用iframe伪造AJAX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe测试体验页面无刷新</title>

    <script>
        function go() {
            //所有的变量,提前获取
            let url = document.getElementById("url").value;
            document.getElementById("iframe1").src=url;
        }
    </script>

</head>
<body>

<div>
    <p>请输入地址:</p>
    <p>
        <input type="text" id="url" value="http://www.baidu.com">
        <input type="button" value="提交" onclick="go()">
    </p>

</div>


<div>
    <iframe id="iframe1" style="width: 100%; height: 500px"></iframe>
</div>

</body>
</html>

3. 利用js实现AJAX

1. 引入jquery

在jsp的head标签内写

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

2. 编写jsp

<%--
  Created by IntelliJ IDEA.
  User: Wang
  Date: 2020/9/10
  Time: 18:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>

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

    <script>
      function a() {
        $.post({
            url: "${pageContext.request.contextPath}/a1",data: {"name" : $("#username").val()},success: function (data) {
                alert(data);
            }
        })
      }

    </script>

  </head>
  <body>

  <%--失去焦点的时候,发起一个请求(携带信息)到后台,调用a()--%>
  用户名: <input type="text" id="username" onblur="a()"/>
  </body>
</html>

3. 编写controller

package com.wang.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@RestController
public class AjaxController {

    @RequestMapping("/t1")
    public String test() {
        return "hello";
    }

    @RequestMapping("/a1")
    public void a1(String name,HttpServletResponse response) throws IOException {
        System.out.println("a1:param => " + name);
        if ("wang".equals(name)){
            response.getWriter().print("true");
        } else {
            response.getWriter().print("false");
        }
    }
}

4. 流程分析

graph LR id1[input] id2[function a] id3[url: localhost:8080/a1 <br/>data: &#123key:value&#125 <br/>callback: function&#40data&#41] id4[&#47a<br/>true or false] id1 --失去焦点--> id2 id2 --ajax.post--> id3 id4 --data:json--> id3 subgraph 前端 id1 id2 id3 end subgraph 后端 id4 end

ajax把主动权交给了前端 ==> callback函数

4. AJAX从后台加载数据

1. 创建实体类

package com.wang.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name;
    private int age;
    private String sex;
}

2. 在controller中将数据传递给前端

package com.wang.controller;

import com.wang.pojo.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@RestController
public class AjaxController {

    @RequestMapping("/t1")
    public String test() {
        return "hello";
    }

    @RequestMapping("/a1")
    public void a1(String name,HttpServletResponse response) throws IOException {
        System.out.println("a1:param => " + name);
        if ("wang".equals(name)){
            response.getWriter().print("true");
        } else {
            response.getWriter().print("false");
        }
    }

    @RequestMapping("/a2")
    public List<User> a2() {
        ArrayList<User> userArrayList = new ArrayList<>();
        //添加数据
        userArrayList.add(new User("wang_1",1,"male"));
        userArrayList.add(new User("wang_2",2,"female"));
        userArrayList.add(new User("wang_3",3,"male"));
        return userArrayList;
    }
}
  • 如果要使用AJAX,此处controller不能调用视图解析器,要返回json供AJAX中的data参数调用
  • 不使用视图解析器的方法: 类上写@RestController或者方法上写@ResponseBody

3. 使用ajax调用并显示

<%--
  Created by IntelliJ IDEA.
  User: Wang
  Date: 2020/9/11
  Time: 10:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>

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

    <script>
        //最外面的function保证窗口一打开里面的函数就运行,一定要写!
        $(function () {
            $("#btn").click(function () {
                /*
                $.post(url,param[可以省略],success
                 */
                $.post("${pageContext.request.contextPath}/a2",function (data) {
                    //console.log(data);
                    let html = "";
                    for (let i = 0; i < data.length; i++) {
                        html += "<tr>" +
                            "<td>" + data[i].name + "</td>" +
                            "<td>" + data[i].age + "</td>" +
                            "<td>" + data[i].sex + "</td>" +
                            "</tr>"
                    }
                    $("#content").html(html);
                });
            })
        });
    </script>

<body>

<input type="button" value="加载数据" id="btn">

<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tbody id="content">
        <%--数据: 后台--%>
    </tbody>
</table>

</body>
</html>

注意

  • js中,最外面的function保证窗口一打开里面的函数就运行,一定要写!(相当于入口函数)

  • 使用html方法,直接拼接html语句到tbody中

  • function(data){}是回调函数,ajax可以执行则执行其中的函数!

5. AJAX用户名验证

1. 解决中文乱码,配置Spring

<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>

2. 添加controller层的功能

package com.wang.controller;

import com.wang.pojo.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@RestController
public class AjaxController {

    @RequestMapping("/t1")
    public String test() {
        return "hello";
    }

    @RequestMapping("/a1")
    public void a1(String name,"male"));
        return userArrayList;
    }

    @RequestMapping("/a3")
    public String a3(String name,String pwd) {
        String msg = "";
        if (name != null){
            //"admin"这些数据应该在数据库中查
            if("admin".equals(name)) {
                msg = "ok";
            } else {
                msg = "用户名有误";
            }
        }

        if (pwd != null){
            //"admin"这些数据应该在数据库中查
            if("123456".equals(pwd)) {
                msg = "ok";
            } else {
                msg = "密码有误";
            }
        }
        return msg;
    }
}

3. 编写前端代码

<%--
  Created by IntelliJ IDEA.
  User: Wang
  Date: 2020/9/11
  Time: 11:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

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

    <script>
        function a1() {
            $.post({
                url: "${pageContext.request.contextPath}/a3",data: {"name": $("#name").val()},success: function (data) {
                    if (data.toString() === 'ok') {
                        $("#userInfo").css("color","green");
                    } else {
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(data)
                }
            })
        }

        function a2() {
            $.post({
                url: "${pageContext.request.contextPath}/a3",data: {"pwd": $("#pwd").val()},success: function (data) {
                    if (data.toString() === 'ok') {
                        $("#pwdInfo").css("color","green");
                    } else {
                        $("#pwdInfo").css("color","red");
                    }
                    $("#pwdInfo").html(data)
                }
            })
        }
    </script>


</head>
<body>

<p>
    用户名 : <input type="text" id="name" onblur="a1()">
    <span id = "userInfo"></span>
</p>
<p>
    密码 : <input type="text" id="pwd" onblur="a2()">
    <span id = "pwdInfo"></span>
</p>



</body>
</html>

注意

  • html方法可以向指定的元素内部插入html语句,用于动态修改网页

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

SpringMVC之异常处理器的使用
开发过程中是不可避免地会出现各种异常情况的，例如网络连接异常、数据格式异常、空指针异常等等。异常的出现可能导致程序的运行出现问题，甚至直接导致程序崩溃。因此，在开发过程中，合理处理异常、避免异常产生、以及对异常进行有效的调试是非常重要的。 对于异常的处理，一般分为两种方式： 编程式异常处理：是指在代
Sping的AOP基本教程(使用注解方式)
说明：使用注解方式实现AOP切面。 什么是AOP？ 面向切面编程，利用AOP可以对业务逻辑的各个部分进行隔离，从而使得业务逻辑各部分之间的耦合度降低，提高程序的可重用性，同时提高了开发的效率。 通俗描述：不通过修改源代码方式，在主干功能里面添加新功能。 AOP底层使用动态代理。 AOP术语 连接点
SpringMVC拦截器的使用
Spring MVC中的拦截器是一种可以在请求处理过程中对请求进行拦截和处理的机制。 拦截器可以用于执行一些公共的操作，例如日志记录、权限验证、数据转换等。在Spring MVC中，可以通过实现HandlerInterceptor接口来创建自定义的拦截器，并通过配置来指定拦截器的应用范围和顺序。 S
SpringMVC之域对象共享数据的多种方式
在 JavaWeb 中，共享域指的是在 Servlet 中存储数据，以便在同一 Web 应用程序的多个组件中进行共享和访问。常见的共享域有四种：ServletContext、HttpSession、HttpServletRequest、PageContext。 ServletContext 共享域：
SpringMVC实现文件上传&下载功能
文件上传 说明： 使用maven构建web工程。 使用Thymeleaf技术进行服务器页面渲染。 使用ResponseEntity实现下载文件的功能。 @Controller public class FileDownloadAndUpload { @GetMapping(&quot;/file/d
使用纯注解替换Spring配置文件&SpringMVC配置文件
创建初始化类，替换web.xml 在Servlet3.0环境中，Web容器(Tomcat)会在类路径中查找实现javax.servlet.ServletContainerInitializer接口的类，如果找到的话就用它来配置Servlet容器。 Spring提供了这个接口的实现，名为SpringS
SpringMVC实现参数校验
在 Web 应用的三层架构中，确保在表述层（Presentation Layer）对数据进行检查和校验是非常重要的。正确的数据校验可以确保业务逻辑层（Business Logic Layer）基于有效和合法的数据进行处理，同时将错误的数据隔离在业务逻辑层之外。这有助于提高系统的健壮性、安全性和可维护
Spring的事务使用教程
什么是事务？ 事务(Transaction)是数据库操作最基本单元，逻辑上一组操作，要么都成功，要么都失败，如果操作之间有一个失败所有操作都失败 。 事务四个特性（ACID） 原子性 一组操作要么都成功，要么都失败。 一致性 一组数据从事务1合法状态转为事务2的另一种合法状态，就是一致。 隔离性 事
Spring的JdbcTemplate使用教程
什么是JdbcTemplate？ Spring 框架对 JDBC 进行封装，使用 JdbcTemplate 方便实现对数据库操作。 准备工作 引入jdbcTemplate的相关依赖： 案例实操 创建jdbc.properties文件，配置数据库信息 jdbc.driver=com.mysql.cj.
SpringMVC学习笔记
SpringMVC1.MVC架构MVC是模型（Model）、视图（View）、控制器（Controller）的简写，是一种软件设计规范是将业务逻辑、数据、显示分离的方法来写代码MVC主要作用是：降低了视图和业务逻辑之间的双向耦合MVC是一个架构模型，不是一种设计模式。1.model（模型）数据模型，提供要展示的数据，因此包
SpringMVC学习笔记
SpringMVC学习笔记1.SpringMVC应用1.1SpringMVC简介​SpringMVC全名叫SpringWebMVC，是⼀种基于Java的实现MVC设计模型的请求驱动类型的轻量级Web框架，属于SpringFrameWork的后续产品。​MVC全名是ModelViewController，是模型(model)－视图(view)－控制器(co
springmvc-数据回显
11.1数据回显基本用法数据回显就是当用户数据提交失败时，自动填充好已经输入的数据。一般来说，如果使用Ajax来做数据提交，基本上是没有数据回显这个需求的，但是如果是通过表单做数据提交，那么数据回显就非常有必要了。11.1.1简单数据类型简单数据类型，实际上框架在这里没有
SpringMVC框架
一、SpringMVC简介1、SpringMVC中重要组件DispatcherServlet:前端控制器,接收所有请求(如果配置/不包含jsp)HandlerMapping:解析请求格式的.判断希望要执行哪个具体的方法.HandlerAdapter:负责调用具体的方法.ViewResovler:视图解析器.解析结果,准备跳转到具体的物
Spring+SpringMVC+Mybatis如何分工合作？
1.它们主要负责的模块Spring主要应用于业务逻辑层。SpringMVC主要应用于表现层。MyBatis主要应用于持久层。2.它们的核心Spring有三大核心，分别是IOC(控制反转)，DI(依赖注入)和AOP(面向切面编程)。SpringMVC的核心是DispatcherServlet(前端控制器)。MyBatis的核心是ORM(对
SpringMVC学习笔记3---注解开发
3.注解开发Springmvc1.使用注解开发要注意开启注解支持，2.注解简化了，处理映射器和处理适配器，只用去管视图解析器即可案例代码：1.web.xml,基本不变可以直接拿去用<!--调用DispatcherServlet--><servlet><servlet-name>springmvc</servlet-name>
SpringMVC：拦截器 文件上传下载
拦截器概述SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理。开发者可以自己定义一些拦截器来实现特定的功能。**过滤器与拦截器的区别：**拦截器是AOP思想的具体应用。过滤器servlet规范中的一部分，任何javaweb工程都可以使用
springMVC约束
<beans xmlns="http://www.springframework.org/schema/beans"xmlns:context="http://www.springframework.org/schema/context"xmlns:mvc="http://www.springframework.org/schema/mvc"xmlns:xsi="
2021-3.19
学习内容：1、SSH&SSM2、Spring3、Struts2&SpringMVC4、Hibernate&MyBatis学习产出：1.SSH和SSM都是有Spring框架的，他们两个差不多。2.Spring分为四个模块，持久层，表示层，检测层，还有核心层，核心层分为2个关键核心功能。分别为，控制反转(IOC),依赖注入(DI),和面向切面编程
SpringMVC的使用技巧总结
一、SpringMVC项目无法引入js,css的问题具体原因是css和js等被SpringMVC拦截了：解决方案：在spring-mvc.xml中配置<mvc:default-servlet-handler/><?xmlversion="1.0"encoding="UTF-8"?><beansxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
基于SSM的学生选课系统/学生信息管理系统
开发环境：Eclipse/MyEclipse、Tomcat8、Jdk1.8数据库：MySQL前端：JavaScript、jQuery、bootstrap4、particles.js后端：maven、SpringMVC、MyBatis、ajax、mysql读写分离、mybatis分页适用于：课程设计，毕业设计，学习等等系统介绍
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot