实现数据库存入html代码，并在前端就页面返回。

最新推荐文章于 2024-04-28 13:46:58 发布
最新推荐文章于 2024-04-28 13:46:58 发布
阅读量2.1k 收藏 5
点赞数
分类专栏： js 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43742217/article/details/121880791
版权

获取页面代码的方法，并保存到后端

function submitHandler() {
			//获取html代码
            var html=$('#table').html();
            //提交到后台，基于若依框架
            $.operate.save(prefix + "/add", {html:html});
        }

上面的save方法实现

save: function(url, data, callback) {
            	var config = {
        	        url: url,
        	        type: "post",
        	        dataType: "json",
        	        data: data,
        	        beforeSend: function () {
        	            $.modal.loading("正在处理中，请稍后...");
        	            $.modal.disable();
        	        },
        	        success: function(result) {
        	            if (typeof callback == "function") {
        	                callback(result);
        	            }
        	            $.operate.successCallback(result);
        	        }
        	    };
        	    $.ajax(config)
            }

调用接口显示页面

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改出行气象')" />
    <style>
        input{
            width:100%;
            border:none;
            text-align: center;
            outline-color: #FFFFFF;
        }
        span{
            display: inline-block;
            width:25%;
            text-align: center;
        }
        #table{
            width:80%;
            margin: 10px auto;
        }
    </style>
</head>
<body class="white-bg">
<input type="hidden" id="id" th:value="${gsWeather.id}">
<div id="table" class="container-div" th:utext="${gsWeather.html}">

</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    //将表格设置呈只读
    $('input').attr('readonly',true)
</script>
</body>
</html>
桃味果仁
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序实现获取用户信息并存入数据库操作示例
10-17
主要介绍了微信小程序实现获取用户信息并存入数据库操作,涉及微信小程序wx.request后台数据交互及php数据存储相关操作技巧,需要的朋友可以参考下
html页面ajax返回值,javascript – ajax调用返回值和我的html页面
weixin_39804059的博客
06-03 371
我目前正在使用以下代码对我的控制器执行ajax调用：$.ajax({type: "POST",url: "@Url.Action("uploadImage", "Item")",data: '{ "imageData" : "' + image + '" }',contentType: "application/json; charset=utf-8",dataType: "json",succe...
success成功之后，跳转到一个新页面
xyf_burning的博客
08-31 1434
新增来款                                                                                                                     来款户名：                                                            
ajax 返回拼接html,在layer弹出层中通过ajax返回html拼接字符串填充数据的方法
weixin_28985215的博客
06-17 222
1，在给一个layer弹出层做checkbox自动选中时，ViewBag传递的时object类型，用不了lambda表达式，代码如下，@foreach (var perm in ViewBag.allPerms){name="PermissionIds" value="@perm.Id"checked="@(ViewBag.RolePerms.Select(r=>r.Id).Contains...
html判断data不为空,jquery ajax请求成功,但是进入了success,但是返回的数据data为空...
weixin_35867979的博客
06-17 1182
jquery ajax请求成功,进入了success,但是返回的数据data为空是因为设置出现问题，解决方法为：1、创建基本的文件结构json_ajax.html和json_ajax.php,下载jquery.js。2、如图编写json_ajax.html和json_ajax.php文件的编码。3、在w(l)amp环境下运行json_ajax.html。4、json_ajax.php，运行结果如图...
数据库存html格式文字记录
chenhuakang的博客
11-11 121
html换行
Vue 将数据库中带html标签的内容输出 (原始 HTML(Raw HTML))
热门推荐
Kit_G的博客
01-24 1万+
原始 HTML(Raw HTML) 双花括号语法，会将数据中的 HTML 转为纯文本后再进行插值。为了输出真正的 HTML，你需要使用 v-html 指令： p>使用双花括号语法：{{ rawHtml }}p> p>使用 v-html 指令：span v-html="rawHtml">span>p> 使用双花括号语法：This should be red. 使用 v-html 指令：T
html 取容器数据库,html从数据库中读取数据
weixin_42302763的博客
06-05 1083
html从数据库中读取数据答案:3信息版本：手机版解决时间 2018-12-16 09:23已解决2018-12-15 11:13html从数据库中读取数据最佳答案2018-12-15 12:08html只能通过ajax接口跟后台数据库接口通信，然后取出来的数据在页面上显示。以下是一个例子：html文件suggest.html：实现搜索提示ajax_search.js：var searchRe...
网站内容保存html代码,利用JavaScript保存网页某部分内容到本地
weixin_39765695的博客
06-08 553
自从有了上次利用代码解决实际问题后，便无法自拔的想用代码去解决生活中遇到的问题。平时喜欢在网上找些简单开源项目看看，学习。此为背景。今天无意中发现这个 　每次打开网页都很麻烦，于是我就想着把这个表格保存到本地(原HTML)，留着以后慢慢看。于是var tab=document.getElementById("table_default");//获取行数var rows=tab.rows;//遍历...
ASP.Net 图片存入数据库的实现代码
10-30
在很多时候，我们有这样的需求：把图片存入到数据库当中。在一些应用程序中，我们可能有一些敏感的资料，由于存储在文件系统（file system）中的东西，将很容易被某些用户盗取，所以这些数据不能存放在文件系统中。
Python爬取小说并存入到mysql数据库源代码
12-26
Python爬取小说并存入到mysql数据库源代码
php下将图片以二进制存入mysql数据库中并显示的实现代码
10-29
php把图片存入mysql教程数据库教程中并在网页上显示，一般情况下并不需要将突破保存到数据库中，不论是异地备份还是什么的，都很麻烦，特殊需要的除外。
ajax回调函数得到一整个html的可能原因
m0_69674055的博客
11-13 334
ajax回调函数得到一整个html的可能原因
判断前端入参是否空否则提示前端写法
最新发布
qq_39306234的博客
04-28 221
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 504
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
两个前端标签
ma_no_lo的博客
04-24 168
两个前端标签
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 969
XYCTF 2024 Web 方向全解
前端Vue2项目搭建过程
xuemen11的博客
04-25 1203
vue2,vuex,vant组件库
docker部署前端项目（二）遇到的问题
weixin_45379180的博客
04-25 394
原因： 安装docker的时候使用的是 yum -y install docker 命令，这个命令安装的是老版本。报错四：conflicts with file from package docker-common。因为使用 sudo yum install docker （下载到的是旧版）missing signature key 缺少秘钥。yum remove docker 删除docker。1、docker版本号 只有1.13.1。解决：可能是docker 未启用。
springboot怎么上传图片并将链接地址存入数据库并在前端调用?
05-31
可以通过以下步骤实现Spring Boot中上传图片并将链接地址存入数据库并在前端调用： 1. 在Spring Boot应用程序中添加文件上传依赖。 2. 创建一个Controller类，其中包含一个处理图片上传请求的方法。 3. 在处理方法中，使用MultipartFile对象来处理上传的图片。使用File类将上传的图片保存到服务器上。 4. 创建一个实体类来存储上传图片的信息，例如图片名、图片类型、图片大小和图片链接地址等信息。 5. 创建一个Repository类，用于将上传图片的信息存储到数据库中。 6. 在处理方法中，将上传图片的信息保存到数据库中。 7. 在前端页面中，创建一个表单，用于上传图片。在表单中添加一个图片选择器，以便用户可以选择要上传的图片。将表单的提交地址设置为处理图片上传请求的Controller方法。 8. 在处理方法中，将上传图片的链接地址返回给前端页面，以便用户可以查看上传图片的链接地址。 9. 在前端页面中，使用img标签来显示上传的图片。将img标签的src属性设置为上传图片的链接地址。 需要注意的是，为了保证上传图片的安全性，需要对图片的类型和大小进行验证，并对上传图片的存储路径进行限制。可以使用Spring Boot的文件上传工具类来简化这些操作。 以下是一个简单的实现代码示例： 1. 添加文件上传依赖： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> ``` 2. 创建Controller类： ```java @RestController @RequestMapping("/api") public class ImageUploadController { @Autowired private ImageRepository imageRepository; @PostMapping("/uploadImage") public String uploadImage(@RequestParam("file") MultipartFile file) { String fileName = StringUtils.cleanPath(file.getOriginalFilename()); try { Image image = new Image(fileName, file.getContentType(), file.getBytes()); imageRepository.save(image); return "/api/downloadImage/" + image.getId(); } catch (IOException ex) { return "Error uploading image"; } } @GetMapping("/downloadImage/{id}") public ResponseEntity<byte[]> downloadImage(@PathVariable Long id) { Image image = imageRepository.findById(id).get(); return ResponseEntity.ok() .contentType(MediaType.parseMediaType(image.getType())) .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + image.getName() + "\"") .body(image.getData()); } } ``` 3. 创建实体类： ```java @Entity @Table(name = "images") public class Image { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(nullable = false) private String name; @Column(nullable = false) private String type; @Lob @Column(nullable = false) private byte[] data; public Image() {} public Image(String name, String type, byte[] data) { this.name = name; this.type = type; this.data = data; } // getters and setters } ``` 4. 创建Repository类： ```java @Repository public interface ImageRepository extends JpaRepository<Image, Long> {} ``` 5. 在前端页面中，创建一个表单： ```html <form method="POST" action="/api/uploadImage" enctype="multipart/form-data"> <input type="file" name="file" accept="image/*"> <button type="submit">Upload</button> </form> ``` 6. 在前端页面中，使用img标签显示上传的图片： ```html <img src="/api/downloadImage/{id}"> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值