前端+php：实现提示框（自动消失）

25号底片~

于 2024-03-04 17:43:35 发布

阅读量397

点赞数 1

分类专栏：前端 php 文章标签：前端 php android

本文链接：https://blog.csdn.net/weixin_46001736/article/details/136458097

版权

前端同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

php

31 篇文章 0 订阅

订阅专栏

效果

php部分：只展示插入过程

<?php
    //插入注册表中
	$sql_insert = "INSERT INTO regist_user(
		userid,
		password,
		phone,
		email
	)
	VALUES (
		'" . $_POST['UserID'] . "',
        '" . CryptPass($_POST['Password']) . "',
		'" . $_POST['Phone'] . "',
		'" . $_POST['Email'] . "'
	)";
	$result_insert = mysqli_query($conn, $sql_insert);
	//重定向
	header('Refresh: 1; URL=' . $_SERVER['PHP_SELF']);
?>

html部分：添加消息提示框的标签

<div id="message" class="message"></div>

js部分：实现成功插入的提示

如果在php中出现了变量$result_insert，就设置message值为"插入成功"，反之提示“插入失败”;设置className的值为success，反之为error。

添加className作为类名，并添加message的值作为文本内容（提示内容）

<script>
	//消息提示
	// 获取提示框元素
	var messageElement = document.getElementById('message');
	// 设置提示消息文本和样式
	var message = '<?php echo $result_insert ? "插入成功" : "插入失败"; ?>';
	var className = '<?php echo $result_insert ? "success" : "error"; ?>';
	// 添加类名和文本内容
    messageElement.classList.add(className);
	messageElement.textContent = message;
	// 显示提示框
	messageElement.style.display = 'block';
	// 延迟一段时间后隐藏提示框
	setTimeout(function() {
		messageElement.style.display = 'none';
	}, 1000);
</script>