首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【SpringBoot】Thymeleaf融合ajax

【SpringBoot】Thymeleaf融合ajax

作者头像
瑞新
发布于 2021-12-06 05:44:43
发布于 2021-12-06 05:44:43
1.2K00
代码可运行
举报
运行总次数:0
代码可运行

文章目录

效果

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
局部刷新
不会出现表单重复提交

ajax.html

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<!--<html lang="en" xmlns:th="http://www.springframework.org/schema/jdbc">-->
<!--<html lang="en">-->
<html xmlns: th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<div>
    <span>该区域不会被刷新</span>
<!--    <Button id="button">刷新</Button>-->
    <div id="child_view">
        <span>该区域会被刷新</span>
    </div>
</div>

<!--不带文件的表单-->
<!-- <form id="addForm" action="/json" method="post">
    <input type="text" name="name" placeholder="请输入名字" />
    <input type="password" name="password" placeholder="密码"/>
</form>
<button type="button" id="submitAdd">确认</button>
 -->
<!--带文件的表单-->
<form id="addForm" action="/json" method="post"enctype=" multipart/form-data">
    <input type="text" name="name" placeholder="请输入名字" />
    <input type="password" name="password" placeholder="密码"/>
    <input type="file" name="file" />
</form>
<button type="button" id="submitAdd">确认</button>

<!--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
<script src="/js/jquery-3.3.1.min.js"></script>
<!-- 
 注意:thymeleaf要改的静态资源路径引入js
 spring:
   thymeleaf:
     cache: false
   resources:
     static-locations: classpath:/templates,classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/
 -->

<script type = "text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;


    $('#button').bind('click', function () {
            refresh();
        });

    function refresh() {
        $.ajax({ //refresh
            url: basePath + '/json',
            type: 'post',
            dataType: 'text',
            data: {

            },
            cache: false,
            async: true,
            success: function (data) {
                var json = eval("(" + data + ")")
                console.log(data)
                console.log(json)
                 $("#child_view").empty();
                 $("#child_view").append(data);
            }
        });
    }

/*    $("#submitAdd").click(function(){
      var targetUrl = $("#addForm").attr("action");
      var data = $("#addForm").serialize();
	  console.log(basePath)
	  console.log(targetUrl)
	  console.log(data)
       $.ajax({
        type:'post',
        url:basePath + targetUrl,
        cache: false,
		async: true,
        data:data,  //重点必须为一个变量如:data
<!--        dataType:'json',-->
        success:function(data){
			console.log("sucess")
			console.log(data)
			alert(data.name)
        },
        error:function(){
         alert("请求失败")
        }
       })

    }) */
	

   // 带文件的表单
   $("#submitAdd").click(function(){
       var targetUrl = $("#addForm").attr("action");
       var data = new FormData($( "#addForm" )[0]);
	   console.log(basePath)
	   console.log(targetUrl)
	   console.log(data)
	   
        $.ajax({
         type:'post',
         url:basePath+targetUrl,
         cache: false,    //上传文件不需缓存
		 async: true,
         processData: false, //需设置为false。因为data值是FormData对象,不需要对数据做处理
         contentType: false, //需设置为false。因为是FormData对象,且已经声明了属性enctype="multipart/form-data"
         data:data,
         // dataType:'json',
         success:function(data){
           console.log("sucess")
           console.log(data)
           console.log(data.name)
		   $("#child_view").empty();
		   $("#child_view").append(data.file);
         },
         error:function(){
          alert("请求失败")
         }
        })
     })

    /*]]>*/
</script>
</body>
</html>

Controller

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
package com.ths.arsenaldnsnginxconfig.controller;

import cn.hutool.json.JSON;
import cn.hutool.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

//@Controller
@RestController
public class AjaxController {

    @RequestMapping("/ajax")
    public ModelAndView ajax() {
        return new ModelAndView("ajax");
    }

    @RequestMapping("/refresh")
    public String refresh(){
        return "refresh";
    }
    

    @RequestMapping("/json")
    public JSON json(String name, String password, MultipartFile file) {

        JSONObject jsonObject = new JSONObject();
        jsonObject.putOpt("name", name);
        jsonObject.putOpt("pwd", password);
        System.out.println(file);
        System.out.println(file.getOriginalFilename());
        System.out.println(file.getOriginalFilename().length());
        if (file.getOriginalFilename().length() != 0) {
            jsonObject.putOpt("file", file.getOriginalFilename());
        }else {
            jsonObject.putOpt("file", "错误:请上传文件,再重新提交");
        }
        return jsonObject;
    }
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/10/13 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Spring 全家桶之 Spring Web MVC(六)- AJAX &amp; Fileupload
拷贝spring-mvc-crud项目,重命名为spring-mvc-ajax。Spring MVC 处理 json 格式的数据需要导入jackson相关依赖
RiemannHypothesis
2022/08/19
1.4K0
Spring 全家桶之 Spring Web MVC(六)- AJAX &amp; Fileupload
Ajax+SpingMVC总结
废话不多说,请看代码和注释 <%-- Created by IntelliJ IDEA. User: root Date: 17-1-19 Time: 下午2:23 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Ajax类
程裕强
2022/05/06
7730
基于java Springboot实现教务管理系统
在当今信息社会发展中中,计算机科学的飞速发展,大多数学校开始注意办公效率的发展是很关键,对学校的管理起到举足轻重的作用。基于 Internet 网络的信息服务,快速成长为现代学校中一项不可或缺的内容措施。很多校园都已经不满意商务办公管理的缓慢成长方式。学院的需求是一个功能强大的,能提供完善管理,管理信息系统的速度。社会持续向前发展,尤其是大多地方普及计算机,计算机应用已经开始向大容量的数据存储与处理持续发展,产生了以计算机为核心,用数据库作为环境的管理信息现代化系统,事务管理方面用大容量和对各种信息动态管理等方面的综合应用。建立学校教务管理系统能够对学校职员对学生信息的管理更为规范化和合理化。能有效快速记录大量的学生得信息, 能对学生用户能够运用简便的方法快速的查到他们所需要的课程信息,并且能够发布通知等一系列功能,实现了由传统人工转向办公向信息自动化。因此用 Java相关开发工具,精心构建了一个教务信息管理平台,实现了一个简单的管理系统。该系统能实现学生的管理、课程的管理、成绩管理、课程选报情况管理、系统用户的管理;能够实现学生报课程的查询、已选报课程成绩的查询、个人信息查询修改等功能、教务信息管理系统的完成给学校管理人员们和学生提供了很多的便利, 能够更好的提高教学质量,其科学性以及合理性对学校的发展有着举足轻重的作用。
玖柒的小窝
2021/12/03
1.2K0
基于java Springboot实现教务管理系统
SpringBoot的4中常见入参形式错误解析
SpringBoot前后端接口对接工作时,经常遇到请求500,400等问题,马虎大意经常导致时间浪费,为此总结了4个常见的复杂请求类型,以此为戒。
JavaDog程序狗
2024/10/14
2480
SpringBoot的4中常见入参形式错误解析
利用easyui实现增删改查:ssm项目的全部代码
index.jsp页面 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <link rel="stylesheet" type="text/css" href="/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="/themes/icon.css"> <script type="text/javasc
一写代码就开心
2020/11/19
1.5K0
利用easyui实现增删改查:ssm项目的全部代码
快速使用layui和ssm开发
大概就这么多,本地导入static文件后,直接复制上面的index首页就可以开始进行layui开发了,很方便。
废江_小江
2022/09/05
6400
Springboot+ajax传输json数组以及单条数据的方法
Springboot+ajax传输json数组以及单条数据的方法 下面是用ajax传输到后台单条以及多条数据的解析的Demo: 结构图如下: image 下面是相关的代码: pom.xml: <?xm
Dream城堡
2018/09/10
2.1K0
Springboot+ajax传输json数组以及单条数据的方法
SpringMVC--文件上传
上篇SpringMVC--SSM整合中整合了SSM三大框架,并进行了接口的编写实现了数据库交互。在后台开发中常用的功能是文件上传,今天来实现后台的文件上传功能:将图片上传,并将服务器存储的文件路径返回给浏览器
aruba
2022/05/25
4350
SpringMVC--文件上传
34.Ajax
优先级 如果发送的是【普通数据】 jQuery XMLHttpRequest iframe 如果发送的是【文件】 iframe jQuery(FormData) XMLHttpRequest(FormData) 原生Ajax Ajax主要就是使用 【XmlHttpRequest】对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件) 1、XmlHttpRequest对象介绍 XmlHttpRequest对象的主要方法: a. void op
zhang_derek
2018/04/11
2K0
springboot展示页面(及关于ajax中页面不跳转问题)
当按钮typ为submit时,在ajax的success的方法中window.location,href跳转不起作用;
JQ实验室
2022/02/10
2.2K0
maven工程 java 实现文件上传 SSM ajax异步请求上传
<input type="file" class="fileupon33" name="fileupmulti" accept="image/jpeg,image/png" onchange="mutiFiles(this)" multiple/>
Krry
2018/09/10
2.7K0
Springboot上传文件&显示进度条
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/137674.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/05
5.1K0
前后端分离跨服务器文件上传-Java SpringMVC版
 近来工作上不上特别忙,加上对后台java了解一点,所以就抽时间,写了一个java版本的前后端分离的跨服务器文件上传功能,包括前后端代码。 一、Tomcat服务器部分 1、Tomcat服务器 单独复制
用户1174387
2018/01/17
5.5K3
前后端分离跨服务器文件上传-Java SpringMVC版
SpringBoot整合
配置 AOP 切面 添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-aop</artifactId> </dependency> 编写切面类 使用 @Component,@Aspect 标记到切面类上: @Aspect @Component public class TimeAspect { @Around("execution(* com.light.spr
崔笑颜
2020/06/08
5740
消息通讯——springboot集成MQTT
可以下载: 链接:https://pan.baidu.com/s/1c9CfyhT4CSY2FEOa1OgxPw 提取码:siwg 也可以用对应的cdn 地址
不愿意做鱼的小鲸鱼
2022/09/26
3.5K0
消息通讯——springboot集成MQTT
Django---Ajax
Ajax准备知识:json 什么是json? 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。 它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。 讲json对象,不得不提到JS对象: 合格的json对象:
用户1214487
2018/01/24
5.2K0
Django---Ajax
SSM第八讲 SpringMVC高级特性
昨天我们将SpringMVC拦截后缀设置为*.form代表SpringMVC会拦截*.form结尾的后缀
易兮科技
2020/09/27
3.1K0
SSM第八讲  SpringMVC高级特性
Ajax研究
Ajax的核心是XMLHttpRequest对象(XHR)。XHR为向服务器发送请求和解析服务器响应提供了接口。能够以异步方式从服务器获取新数据。
后端码匠
2021/08/20
1.1K0
springboot2实现图片文件上传与mysql存储路径并回显
QGS
2023/08/18
8610
springmvc文件上传/下载
需要导入fileupload依赖包 io的包 com.springsource.org.apache.commons.fileupload-1.2.0.jar com.springsource.org.apache.commons.io-1.4.0.jar
微醺
2019/01/17
1.7K0
相关推荐
Spring 全家桶之 Spring Web MVC(六)- AJAX &amp; Fileupload
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档