js实现数据库中时间的回显

最新推荐文章于 2024-07-14 15:54:59 发布
最新推荐文章于 2024-07-14 15:54:59 发布
阅读量907 收藏 11
点赞数 14
文章标签： javascript 数据库 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79659699/article/details/136662507
版权
本文讲述了在项目开发中遇到的datetime-local时间控件显示问题，通过分析发现时间格式中的-和T导致显示失败。作者提供了使用JavaScript的substring方法对时间进行裁剪，从而成功实现数据回显的解决方案。
摘要由CSDN通过智能技术生成

一、前言

当我们在编写项目时，免不了要在数据库中涉及时间信息，但是我们对其进行增删查时进行常规操作就很容易，但是到时间时就会遇到显示失败的问题，下面来给大家讲解一下方法把

二、解决过程

1.先看一下时间控件

input中通过type选取datetime-local，这样我们就可以获得一个时间控件啦，如下图（通过class属性对其可以进行样式设计，以及后期的回显功能）

<input type="datetime-local" class="createtime">

 当我们点击右边的日历样式图标就可以显示下方样式，我们就可以从当中选取时间啦

2.数据的回显，这个具体可以参看我的上篇博客

下方附上相关链接

js实现数据的回显功能-CSDN博客

3.实现方法

（1）先来看一下我们常规的方法

$(".createtime").val(data.data.createtime)

通过该种形式，我们能看到，我们的其他数据都能显示，但是到了时间属性位置，就会显示失败了

而当我们看到我们的控制台时，我们的时间也已经被我们获取到了

（2）解决办法

实际的时间显示是这样的（也就是上方图片ceratetime中，日期和时间中间的空格位置是T）

2024-03-07T14:08:00.0

既然已经知道了根本的问题所在了，那我们想要解决问题就更容易了，我们可以对时间进行裁剪

通过.substring()对我们获取的时间进行选取并裁剪，这样就可以回显成功啦

$(".createtime").val(data.data.createtime.substring(0,10)+"T"+data.data.createtime.substring(11))

肆·意
关注
  • 14
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
wdatepicker回显数据问题的完美解决
天程十八的博客
04-17 4448
wdatepicker回显数据问题的完美解决: 首先不建议采用form:input而是采用一般的input标签调用该控件！ 回显的逻辑过程界定：采集(录入)->存储(插入)—>显示(修改)—>再采集(录入)—>再存储(更新) 1.采集数据时，进入录入页面 在javabean中使用双日期字段:一个是string类型的cjgzrq，一个是date类型的aae310 ...
通过Websocket实现Postgres数据库更新实时回显
weixin_43616450的博客
10-24 687
开发环境: Jdk1.8 Tomcat 8.5 Postgres 9 Eclipse JavaEE 操作系统:win 10 实现回显的思路: 定义index.jsp用作websocket客户端 定义jdbc类操作数据库,并把值实时返回 定义websocket配置类实现ServerApplicationConfig接口,配置websocket 定义服务器端类 实现数据接收与数据发送 目...
js为input框显示当前时间
c230704的博客
06-22 3380
function today() {//构建方法 var today = new Date();//new 出当前时间 var h = today.getFullYear();//获取年 var m = today.getMonth() + 1;//获取月 var d = today.getDate();//获取日 var H = today.getHours();//获取时 var M = to...
input标签回显日期类型数据（Date）
未出笼的菜包的博客
05-24 8361
我们常用 input 中的 type = ‘date’ 来设置可选日期，但是正常的直接回显就碰到了问题，没有回显数据，只是显示了 年/月/日 但是数据没有显示 像这样 解决办法 在 input 语句块内加入 required="required" <input type="date" th:value="${#dates.format(dlines.courseOfflineTime,'yyyy-MM-dd')}" required="required"> ...
什么是回显？
weixin_66107848的博客
11-07 1414
回显（Echo）就是显示正在执行的批处理命令及执行的结果等，位置是显示在屏幕上。 举例 在执行有些命令的时候，如果不希望显示返回值，就要消除回显。比如：在用串口处理通信中，使用AT命令，来检测Module与串口是否连通，能否接收AT命令。命令返回：OK (串口通信正常)（无返回，与串口通信未连通）。用 ATE0去除回显。 数据回显就是当用户数据提交失败时，自动填充好已经输入的数据，一般来说，如果是使用Ajax来做数据提交，基本上是没有数据回显这个需求的，但是如果通过表单做数据提交，那么数据回显就非常必要
ext2.0 DateTimeField控件
06-09
ext2.0 DateTimeField控件 自带ext2.0 里面有例子，不懂的可以直接看例子。 datefield扩展控件，可以显示时分秒
js实现数据的回显功能
2301_79659699的博客
03-12 703
数据回显
ueditor保存数据库后回显
我的博客
03-27 285
<body> ...
java实现本地读取图片存储到数据库中并在html网页显示
05-18
在本文中，我们将深入探讨如何使用Java实现在本地读取图片并将其存储到数据库中，之后再通过HTML页面显示这些图片。这个过程涉及到的主要技术包括Java编程、数据库操作（特别是MySQL）以及前后端交互。 首先，我们...
SSM(Spring+SpringMvc+Mybatis)图片上传保存到数据库与回显+sql
10-31
在这个项目中，我们主要关注的是如何在SSM框架下实现图片上传并将其信息存储到数据库，以及如何将已存储的图片信息回显出来。 首先，`Spring`作为核心容器，负责管理应用中的所有Bean，提供依赖注入（Dependency ...
基于SSM框架的图片上传并回显
01-10
4. **文件上传**：在SSM框架中实现文件上传，我们需要使用`CommonsMultipartResolver`或Spring Boot内置的`MultipartFile`接口。用户选择图片后，这些文件会被暂时保存在服务器的临时目录，然后通过服务端代码将其...
图书项目3.0：Mybatis + vue + axios + js + mysql + log4j 技术栈实现
07-04
本项目是一个简单的图书管理系统，本博客在tomcat中采用servlet 和vue和mybatis技术实现如下功能： * 用户登陆，输入用户名，密码，登陆成功后保存到session中，跳转到首页； * 用户注册，输入相关信息，以及验证码...
多图片上传加回显springboot代码
03-16
标题 "多图片上传加回显springboot代码" 涉及到的是在Spring Boot应用程序中实现多图上传和预览的功能。Spring Boot是Java开发的一个流行框架，它简化了创建独立、生产级的Spring应用程序的过程。这个项目可能是为了...
html5 input type=datetime-local 无法赋值问题
热门推荐
Elvis技术小屋
06-30 1万+
T在php的date函数中格式化后是CST   所以不能写成date('Y-m-dTH:i:s',time()) 得把把年月日和时间用date函数分别格式化  再用大写T分割开  放在value里 就可以了 echo(date('H:i:s',time())."T".date('H:i:s',time())); php代码：
【JavaScript 报错】未捕获的URI错误：Uncaught URIError
Allen-
07-11 665
Uncaught URIError 是JavaScript中常见的一种错误，通常发生在全局URI处理函数（如 decodeURIComponent、encodeURIComponent）使用不当时。本文将详细介绍 Uncaught URIError 错误的常见原因及其解决方案。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 298
原生WebSocket： new WebSocket。
ReactRouter v6升级的步骤
最新发布
feixin369的博客
07-14 193
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
kindeditor中数据特殊字符转义处理上传数据库与前端回显的前后端与数据库代码，jsp页面，数据库mysql
05-27
前端代码： 1. 使用JavaScript中的encodeURIComponent()函数将特殊字符转义，将编辑器中的内容传递给后端： ```javascript var content = encodeURIComponent(editor.html()); // editor为KindEditor实例 ``` 2. 将转义后的内容通过Ajax请求发送给后端： ```javascript $.ajax({ type: "POST", url: "save.jsp", data: "content=" + content, success: function(data) { // 请求成功后的操作 } }); ``` 后端代码： 1. 在JSP页面中获取前端传递的数据，使用Java中的URLDecoder.decode()函数将数据进行解码： ```java String content = request.getParameter("content"); content = URLDecoder.decode(content, "UTF-8"); ``` 2. 将解码后的内容保存到MySQL数据库中： ```java Connection conn = null; PreparedStatement ps = null; try { conn = DriverManager.getConnection(url, username, password); String sql = "INSERT INTO table_name (content) VALUES (?)"; ps = conn.prepareStatement(sql); ps.setString(1, content); ps.executeUpdate(); } catch (SQLException e) { e.printStackTrace(); } finally { try { if (ps != null) { ps.close(); } if (conn != null) { conn.close(); } } catch (SQLException e) { e.printStackTrace(); } } ``` 3. 在JSP页面中从MySQL数据库中读取数据，使用Java中的StringEscapeUtils.escapeHtml()函数将数据进行转义，防止XSS攻击： ```java Connection conn = null; PreparedStatement ps = null; ResultSet rs = null; try { conn = DriverManager.getConnection(url, username, password); String sql = "SELECT content FROM table_name WHERE id=?"; ps = conn.prepareStatement(sql); ps.setInt(1, id); rs = ps.executeQuery(); if (rs.next()) { String content = rs.getString("content"); content = StringEscapeUtils.escapeHtml(content); // 将转义后的内容传递给前端 } } catch (SQLException e) { e.printStackTrace(); } finally { try { if (rs != null) { rs.close(); } if (ps != null) { ps.close(); } if (conn != null) { conn.close(); } } catch (SQLException e) { e.printStackTrace(); } } ``` 其中，StringEscapeUtils是Apache Commons Lang库中的一个类，需要导入该库才能使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值