Ajax动态的显示和退出div

本文介绍了一个使用JQuery实现的浮动窗口示例。通过HTML、CSS和JS代码结合,展示了如何创建并控制一个可以显示和隐藏的浮动窗口。该窗口能够通过链接触发显示,并可通过关闭按钮进行关闭。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery实例:浮动窗口</title>
    <script type="text/javascript" src="jslib/jquerywin.js"></script>
    <script type="text/javascript" src="jslib/jquery-3.1.1.js"></script>
    <link href="css/win.css" rel="stylesheet" type="text/css">
</head>
<body>
    <a onclick="showWin()" href="#">显示窗口</a>
    <!--css改变div -->
    <div id="win">我的窗口<span id="close" onclick ="hide()">X</span></div>

</body>
</html>


js:

function showWin(){
    var winNode = $("#win");
//通过jqurey修改css
    //winNode.css("display","block");
//使用jquery的show方法
    winNode.fadeIn("slow");//淡入淡出fadeOut
//winNode.show(4000);
}
function hide(){
    var Node = $("#win");
    //Node.css("display","none");
    Node.hide("slow");
    //或者是fadeout淡出
}


css:


/*#id id选择器*/
#win{
    border: #ff1719 1px solid;
    border-radius:10px;/*控制高和宽*/
    width: auto;
    height: auto;

    position: absolute;
    top: 200px;
    left: 200px;

    display: none;
}
#close{
    cursor:pointer;
}


实现强制登录的一般流程如下: 1. 在前端页面中添加一个登录验证的功能,当用户访问需要登录的页面时,前端会发送一个Ajax请求到后端进行验证。 2. 后端接收到请求后,判断用户是否已经登录,如果已经登录,则返回正常的页面内容;如果未登录,则返回一个特定的状态码,告诉前端需要进行登录。 3. 前端接收到后端返回的状态码后,根据状态码进行相应的处理,通常是跳转到登录页面。用户登录成功后,再重新返回需要登录的页面。 下面是一个使用Spring BootAjax实现强制登录的示例代码: 前端页面代码: ``` <!-- 页面内容 --> <div id="content"> <!-- 需要登录的内容 --> </div> <script> $(function() { $.ajax({ url: '/checkLogin', // 发送验证登录请求的URL success: function(data) { if (data.code == 0) { // 用户已登录,显示页面内容 $('#content').show(); } else { // 用户未登录,跳转到登录页面 window.location.href = '/login'; } } }) }) </script> ``` 后端代码: ``` @RestController public class LoginController { @GetMapping("/checkLogin") public ResponseData checkLogin(HttpServletRequest request) { // 判断用户是否已登录 if (request.getSession().getAttribute("user") != null) { return ResponseData.success(); } else { return ResponseData.fail("需要登录", -1); } } @PostMapping("/login") public ResponseData login(HttpServletRequest request, String username, String password) { // 用户登录逻辑 if ("admin".equals(username) && "123456".equals(password)) { request.getSession().setAttribute("user", username); return ResponseData.success(); } else { return ResponseData.fail("用户名或密码错误", -2); } } @GetMapping("/logout") public ResponseData logout(HttpServletRequest request) { // 用户退出登录逻辑 request.getSession().removeAttribute("user"); return ResponseData.success(); } } ``` 其中,ResponseData是一个自定义的响应数据类,用于封装返回给前端的数据。 ``` public class ResponseData { private int code; private String message; private Object data; public static ResponseData success() { return new ResponseData(0, "success", null); } public static ResponseData fail(String message, int code) { return new ResponseData(code, message, null); } // 省略gettersetter方法 } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值