【JavaWeb】Ajax+loading加载动画实现方式

最新推荐文章于 2024-05-14 05:36:12 发布
最新推荐文章于 2024-05-14 05:36:12 发布
阅读量3.3k 收藏 10
点赞数 4
分类专栏： Java程序 文章标签： javaweb ajax 加载load
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coralime/article/details/82215613
版权

【loading加载动画】

  • 第一种loading效果

#1-> [CSS] 样式文件中添加如下样式代码，注意标签[#loader]

#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    /*width: 20px;*/
    /*height: 20px;*/
    margin: -25px 0 0 -25px;
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #00A76F;
    border-bottom: 6px solid #00A76F;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#2-> index.jsp文件[body]中添加<div>，设置id="loader"

<body>
        <div id="loader"></div>
</body>
  • 第二种loading效果

 #1-> [CSS] 样式文件中添加如下样式代码，注意标签[#fountainG]

#fountainG{
    position:relative;
    margin:10% auto;
    width:240px;
    height:29px}

.fountainG{
    position:absolute;
    top:0;
    background-color:#33cc99;
    width:29px;
    height:29px;
    -webkit-animation:bounce_fountainG 1.3s infinite normal;
    -moz-animation:bounce_fountainG 1.3s infinite normal;
    -o-animation:bounce_fountainG 1.3s infinite normal;
    -ms-animation:bounce_fountainG 1.3s infinite normal;
    animation:bounce_fountainG 1.3s infinite normal;
    -moz-transform:scale(.3);
    -webkit-transform:scale(.3);
    -ms-transform:scale(.3);
    -o-transform:scale(.3);
    transform:scale(.3);
    border-radius:19px;
}

#fountainG_1{
    left:0;
    -moz-animation-delay:0.52s;
    -webkit-animation-delay:0.52s;
    -ms-animation-delay:0.52s;
    -o-animation-delay:0.52s;
    animation-delay:0.52s;
}

#fountainG_2{
    left:30px;
    -moz-animation-delay:0.65s;
    -webkit-animation-delay:0.65s;
    -ms-animation-delay:0.65s;
    -o-animation-delay:0.65s;
    animation-delay:0.65s;
}

#fountainG_3{
    left:60px;
    -moz-animation-delay:0.78s;
    -webkit-animation-delay:0.78s;
    -ms-animation-delay:0.78s;
    -o-animation-delay:0.78s;
    animation-delay:0.78s;
}

#fountainG_4{
    left:90px;
    -moz-animation-delay:0.91s;
    -webkit-animation-delay:0.91s;
    -ms-animation-delay:0.91s;
    -o-animation-delay:0.91s;
    animation-delay:0.91s;
}

#fountainG_5{
    left:120px;
    -moz-animation-delay:1.04s;
    -webkit-animation-delay:1.04s;
    -ms-animation-delay:1.04s;
    -o-animation-delay:1.04s;
    animation-delay:1.04s;
}

#fountainG_6{
    left:150px;
    -moz-animation-delay:1.17s;
    -webkit-animation-delay:1.17s;
    -ms-animation-delay:1.17s;
    -o-animation-delay:1.17s;
    animation-delay:1.17s;
}

#fountainG_7{
    left:180px;
    -moz-animation-delay:1.3s;
    -webkit-animation-delay:1.3s;
    -ms-animation-delay:1.3s;
    -o-animation-delay:1.3s;
    animation-delay:1.3s;
}

#fountainG_8{
    left:210px;
    -moz-animation-delay:1.43s;
    -webkit-animation-delay:1.43s;
    -ms-animation-delay:1.43s;
    -o-animation-delay:1.43s;
    animation-delay:1.43s;
}

@-moz-keyframes bounce_fountainG{
    0%{
        -moz-transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        -moz-transform:scale(.3);
        background-color:#0099cc;
    }

}

@-webkit-keyframes bounce_fountainG{
    0%{
        -webkit-transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        -webkit-transform:scale(.3);
        background-color:#0099cc;
    }

}

@-ms-keyframes bounce_fountainG{
    0%{
        -ms-transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        -ms-transform:scale(.3);
        background-color:#0099cc;
    }

}

@-o-keyframes bounce_fountainG{
    0%{
        -o-transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        -o-transform:scale(.3);
        background-color:#0099cc;
    }

}

@keyframes bounce_fountainG{
    0%{
        transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        transform:scale(.3);
        background-color:#0099cc;
    }

}

#2-> index.jsp文件[body]中添加<div>，设置id="fountainG" 

<body>
      <div id="fountainG">
        <div id="fountainG_1" class="fountainG">
        </div>
        <div id="fountainG_2" class="fountainG">
        </div>
        <div id="fountainG_3" class="fountainG">
        </div>
        <div id="fountainG_4" class="fountainG">
        </div>
        <div id="fountainG_5" class="fountainG">
        </div>
        <div id="fountainG_6" class="fountainG">
        </div>
        <div id="fountainG_7" class="fountainG">
        </div>
        <div id="fountainG_8" class="fountainG">
        </div>
      </div>
  </body>

【Ajax】

  • 第一种实现方式

在页面开始加载时运行 -> window.onload = function(){}

在ajax开始时运行 -> $(document).ajaxStart -> <div-loader>显示 -> loading.show()

在ajax完成时运行 -> $(document).ajaxSuccess - <div-loader>隐藏 -> loading.hide()

<script type="text/javascript">

        window.onload = function () {

            function loadingEffect() {
                var loading = $('#loader');
                loading.hide();
                $(document).ajaxStart(function () {
                    loading.show();
                }).ajaxSuccess(function () {
                    loading.hide();
                });
            }

            loadingEffect();

        }

</script>
  • 第二种实现方式

#1-> ajax-async:true - 默认为true(异步)，false(同步)

#2-> beforeSend：showLoad() - ajax请求发送之前加载loading动画

#3-> error + complete : hiddenLoad() - ajax请求成功以后以及发生错误的情况下隐藏loading动画

 <script type="text/javascript">

      window.onload = function () {

          //加载动画效果
          function showLoad(){
              $('#fountainG').show();
          }
          //隐藏动画效果
          function hiddenLoad(){
              $('#fountainG').hide();
          }

          $.ajax({
              type:"post",
              url:"TableDemoServlet",
              async:true, //默认-异步（true） 同步-false
              dataType:"json",
              beforeSend: function (){
                  //ajax刷新前加载load动画
                  showLoad();
              },
              success:function () {
                  //write code
              },
              error:function (e) {
                  //隐藏load动画
                  hiddenLoad();  
              },
              complete:function () {

                  //完成以后隐藏load动画
                  hiddenLoad();            
              }
          });
      }

</script>

【完整代码】

主要实现

#1-> 从SQL Server数据库中读取数据显示在表格上，

#2-> 后台Servlet通过JSONArray传值到前端

#3-> 前端通过ajax接收最终显示在JSP页面上 

写了两个页面，共用一个CSS文件

  • index.jsp -> loading[fountainG] + ajax方法2 实现
  • test.jsp -> loading[loader] + ajax方法1实现

<%--
  Created by IntelliJ IDEA.
  User: Coraline
  Date: 2018/8/29
  Time: 10:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>TableDemo</title>

    <%--给标题左侧加上logo--%>
    <link rel="shortcup icon" href="pic/flower_72px_1132301_easyicon.net.png">
    <%--链接外部样式表--%>
    <link rel="stylesheet" type="text/css" href="styles.css">

    <script src="./scripts/jquery.min.js"></script>

    <%--写业务逻辑--%>
    <script type="text/javascript">

      window.onload = function () {

          //加载动画效果
          function showLoad(){
              $('#fountainG').show();
          }
          //隐藏动画效果
          function hiddenLoad(){
              $('#fountainG').hide();
          }

          $.ajax({
              type:"post",
              url:"TableDemoServlet",
              async:true, //默认-异步（true） 同步-false
              dataType:"json",
              beforeSend: function (){
                  //ajax刷新前加载load动画
                  showLoad();
              },
              success:function (dataArray) {

                  var tableBody = "<tbody id='tableBody'>";

                  for (var i = 0; i < dataArray.length; i++) {

                      tableBody += "<tr>";

                      tableBody += "<td>"+dataArray[i]['ID']+"</td>";
                      tableBody += "<td>"+dataArray[i]['username']+"</td>";
                      tableBody += "<td>"+dataArray[i]['birthdate']+"</td>";
                      tableBody += "<td>"+dataArray[i]['nationality']+"</td>";

                      tableBody += "</tr>";
                  }

                  tableBody += "</tBody>";

                  $("tbody#tableBody").remove();//删除已有表格
                  $("#tableHead").after(tableBody);

              },
              error:function (e) {
                  //隐藏load动画
                  hiddenLoad();
                  alert("错误！"+e.status);
              },
              complete:function () {

                  //完成以后隐藏load动画
                  hiddenLoad();

                  //表格隔行显色，鼠标悬浮高亮显示
                  var oTab = document.getElementById('tbl');
                  var oldColor = '';//用于保存原来一行的颜色

                  for(var i = 0; oTab.tBodies[0].rows.length; i++){

                      //当鼠标移上去，改变字体色-背景色
                      oTab.tBodies[0].rows[i].onmouseover = function () {
                          oldColor = this.style.background;
                          this.style.background = "#009B63";
                          this.style.color = "#ffffff";
                      };

                      //当鼠标移开，恢复原来的颜色
                      oTab.tBodies[0].rows[i].onmouseout = function () {
                          this.style.background = oldColor;
                          this.style.color = "#000000";
                      };

                      //隔行显色
                      if(i%2){
                          oTab.tBodies[0].rows[i].style.background = "#EAF2D3";
                      }
                      else{
                          oTab.tBodies[0].rows[i].style.background = "";
                      }
                  }
              }
          });
      }

  </script>

  </head>

  <body>
      <table id="tbl" align="center">

        <caption>User Account Information</caption>

        <thead id="tableHead">
          <tr>
            <th>ID</th>
            <th>UserName</th>
            <th>Birthdate</th>
            <th>Nationality</th>
          </tr>
        </thead>

        <tbody id="tableBody"></tbody>

      </table>

      <%--load动画效果--%>
      <div id="fountainG">
        <div id="fountainG_1" class="fountainG">
        </div>
        <div id="fountainG_2" class="fountainG">
        </div>
        <div id="fountainG_3" class="fountainG">
        </div>
        <div id="fountainG_4" class="fountainG">
        </div>
        <div id="fountainG_5" class="fountainG">
        </div>
        <div id="fountainG_6" class="fountainG">
        </div>
        <div id="fountainG_7" class="fountainG">
        </div>
        <div id="fountainG_8" class="fountainG">
        </div>
      </div>

  </body>
</html>

 

<%--
  Created by IntelliJ IDEA.
  User: Coraline
  Date: 2018/8/29
  Time: 10:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>TableDemo</title>

    <%--给标题左侧加上logo--%>
    <link rel="shortcup icon" href="pic/flower_72px_1132301_easyicon.net.png">
    <%--链接外部样式表--%>
    <link rel="stylesheet" type="text/css" href="styles.css">

    <script src="./scripts/jquery.min.js"></script>

    <%--写业务逻辑--%>
    <script type="text/javascript">

        window.onload = function () {

            function loadingEffect() {
                var loading = $('#loader');
                loading.hide();
                $(document).ajaxStart(function () {
                    loading.show();
                }).ajaxSuccess(function () {
                    loading.hide();
                });
            }

            loadingEffect();

            $.ajax({
                type:"post",
                url:"TableDemoServlet",
                async:true, //默认-异步（true） 同步-false
                dataType:"json",
                success:function (dataArray) {

                    var tableBody = "<tbody id='tableBody'>";

                    for (var i = 0; i < dataArray.length; i++) {

                        tableBody += "<tr>";

                        tableBody += "<td>"+dataArray[i]['ID']+"</td>";
                        tableBody += "<td>"+dataArray[i]['username']+"</td>";
                        tableBody += "<td>"+dataArray[i]['birthdate']+"</td>";
                        tableBody += "<td>"+dataArray[i]['nationality']+"</td>";

                        tableBody += "</tr>";
                    }

                    tableBody += "</tBody>";

                    $("tbody#tableBody").remove();//删除已有表格
                    $("#tableHead").after(tableBody);

                },
                error:function (e) {
                    alert("错误！"+e.status);
                },
                complete:function () {

                    var oTab = document.getElementById('tbl');
                    var oldColor = '';//用于保存原来一行的颜色

                    for(var i = 0; oTab.tBodies[0].rows.length; i++){
                        oTab.tBodies[0].rows[i].onmouseover = function () {
                            oldColor = this.style.background;
                            this.style.background = "#009B63";
                            this.style.color = "#ffffff";
                        };
                        oTab.tBodies[0].rows[i].onmouseout = function () {
                            this.style.background = oldColor;
                            this.style.color = "#000000";
                        };

                        if(i%2){
                            oTab.tBodies[0].rows[i].style.background = "#EAF2D3";
                        }
                        else{
                            oTab.tBodies[0].rows[i].style.background = "";
                        }
                    }
                }
            });
        }

</script>

</head>

<body>
        <table id="tbl" align="center">

            <caption>User Account Information</caption>

            <thead id="tableHead">
            <tr>
                <th>ID</th>
                <th>UserName</th>
                <th>Birthdate</th>
                <th>Nationality</th>
            </tr>
            </thead>

            <tbody id="tableBody"></tbody>

        </table>

        <div id="loader"></div>

</body>
</html>


#tbl
{
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    width: 30%;
    border-collapse: collapse;
}

#tbl caption
{
    font-size: 2em;
    color: #009B63;
    font-weight: bold;
}

#tbl th
{
    font-size: 1.1em;
    border: 1px solid rgb(0,136,88);
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #ffffff;
    background-color: #009B63;
    width: 10%;
}

#tbl td
{
    font-size:1em;
    border: 1px solid #98bf21;
    padding: 3px 3px 3px 3px;
    width: 10%;
}

/*----------------------------加载loading动画效果---1-----------------------------*/
#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    /*width: 20px;*/
    /*height: 20px;*/
    margin: -25px 0 0 -25px;
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #00A76F;
    border-bottom: 6px solid #00A76F;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*----------------------------加载loading动画效果---2-----------------------------*/
#fountainG{
    position:relative;
    margin:10% auto;
    width:240px;
    height:29px}

.fountainG{
    position:absolute;
    top:0;
    background-color:#33cc99;
    width:29px;
    height:29px;
    -webkit-animation:bounce_fountainG 1.3s infinite normal;
    -moz-animation:bounce_fountainG 1.3s infinite normal;
    -o-animation:bounce_fountainG 1.3s infinite normal;
    -ms-animation:bounce_fountainG 1.3s infinite normal;
    animation:bounce_fountainG 1.3s infinite normal;
    -moz-transform:scale(.3);
    -webkit-transform:scale(.3);
    -ms-transform:scale(.3);
    -o-transform:scale(.3);
    transform:scale(.3);
    border-radius:19px;
}

#fountainG_1{
    left:0;
    -moz-animation-delay:0.52s;
    -webkit-animation-delay:0.52s;
    -ms-animation-delay:0.52s;
    -o-animation-delay:0.52s;
    animation-delay:0.52s;
}

#fountainG_2{
    left:30px;
    -moz-animation-delay:0.65s;
    -webkit-animation-delay:0.65s;
    -ms-animation-delay:0.65s;
    -o-animation-delay:0.65s;
    animation-delay:0.65s;
}

#fountainG_3{
    left:60px;
    -moz-animation-delay:0.78s;
    -webkit-animation-delay:0.78s;
    -ms-animation-delay:0.78s;
    -o-animation-delay:0.78s;
    animation-delay:0.78s;
}

#fountainG_4{
    left:90px;
    -moz-animation-delay:0.91s;
    -webkit-animation-delay:0.91s;
    -ms-animation-delay:0.91s;
    -o-animation-delay:0.91s;
    animation-delay:0.91s;
}

#fountainG_5{
    left:120px;
    -moz-animation-delay:1.04s;
    -webkit-animation-delay:1.04s;
    -ms-animation-delay:1.04s;
    -o-animation-delay:1.04s;
    animation-delay:1.04s;
}

#fountainG_6{
    left:150px;
    -moz-animation-delay:1.17s;
    -webkit-animation-delay:1.17s;
    -ms-animation-delay:1.17s;
    -o-animation-delay:1.17s;
    animation-delay:1.17s;
}

#fountainG_7{
    left:180px;
    -moz-animation-delay:1.3s;
    -webkit-animation-delay:1.3s;
    -ms-animation-delay:1.3s;
    -o-animation-delay:1.3s;
    animation-delay:1.3s;
}

#fountainG_8{
    left:210px;
    -moz-animation-delay:1.43s;
    -webkit-animation-delay:1.43s;
    -ms-animation-delay:1.43s;
    -o-animation-delay:1.43s;
    animation-delay:1.43s;
}

@-moz-keyframes bounce_fountainG{
    0%{
        -moz-transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        -moz-transform:scale(.3);
        background-color:#0099cc;
    }

}

@-webkit-keyframes bounce_fountainG{
    0%{
        -webkit-transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        -webkit-transform:scale(.3);
        background-color:#0099cc;
    }

}

@-ms-keyframes bounce_fountainG{
    0%{
        -ms-transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        -ms-transform:scale(.3);
        background-color:#0099cc;
    }

}

@-o-keyframes bounce_fountainG{
    0%{
        -o-transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        -o-transform:scale(.3);
        background-color:#0099cc;
    }

}

@keyframes bounce_fountainG{
    0%{
        transform:scale(1);
        background-color:#33cc99;
    }

    100%{
        transform:scale(.3);
        background-color:#0099cc;
    }

}

Servlet传过来的JSONArray

[{"ID":1,"birthdate":"1989-10-14","nationality":"Australia","username":"Mia Wasikowska"},{"ID":2,"birthdate":"1963-06-09","nationality":"USA","username":"Johnny Depp"},{"ID":3,"birthdate":"1966-05-26","nationality":"England","username":"Helena Bonham Carter"},
{"ID":4,"birthdate":"1982-11-12","nationality":"NewYork","username":"Anne Hathaway"},{"ID":5,"birthdate":"1969-02-05","nationality":"England","username":"Michael Sheen"},{"ID":6,"birthdate":"1964-04-20","nationality":"USA","username":"Crispin Glover"},{"ID":7,"birthdate":"1958-08-25","nationality":"USA","username":"Tim Burton"}]

【实现效果】

  • index.jsp

  • test.jsp

【参考】 

jquery的ajax提交时“加载中”提示的处理方法

https://www.cnblogs.com/lengzhijun/p/4708431.html

ajax 异步加载显示等待效果

https://www.cnblogs.com/zengdingxin/archive/2016/08/01/5725061.html​​​​​​​

js实现ajax加载过程中Loading效果

https://blog.csdn.net/W_DongQiang/article/details/80649127

爱吃香草冰淇淋的阿喵
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java中表格隔行变色_【JavaWeb】TableDemo 表格隔行显色+鼠标悬停高亮显示
weixin_30784365的博客
02-24 896
【普通表格-非隔行显色】approach1window.onload = function () {//#-----非隔行显色---需要css辅助-------------------------------------------function mouseover (){var rows = document.getElementsByTagName('tr');//取得行for(var i=...
基于JavaWeb+layui+ajax+mysql的hrm人事管理系统 包括完整代码和mysqll数据库脚本及注释信息
01-29
基于JavaWeb+layui+ajax+mysql的hrm人事管理系统 包括完整代码和mysqll数据库脚本,核心代码有注释信息 开发环境：jdk1.8 + tomcat 9.0 开发工具：eclipse 数据库：mysql 前端使用：layui + javascript + jquery + ...
Servlet+Ajax+Echarts实现饼图动态数据可视化
weixin_42572590的博客
08-25 2092
在这追求美的时代，页面数据可视化可谓是一个很好的例子，它不仅可以带来用户更直观、更方便的认识，还能把冷冰冰的数据以一种美感活灵活现的表现出来。今天我想和大家聊聊如果用Ajax、百度的Echarts来实现一个简单的饼图动态数据可视化。
2024年HarmonyOS鸿蒙最新小程序封装加载动画_小程序加载动画，42岁程序员面试有希望吗
最新发布
2401_84862291的博客
05-14 690
(img-Nu7lbn1M-1715636150602)]// 在数据请求成功回调中隐藏Loading动画。// 在数据请求成功回调中隐藏Loading动画。// 在页面中显示Loading动画。// 在页面中显示Loading动画。// 加载Loading组件。// 加载Loading组件。// 是否显示loading。
javaWeb的创建实践，
weixin_44194661的博客
10-28 1247
ⅩⅢ.javaWeb 应用程序架构分为两种 C/S架构 C/S(Client/Server):客户端/服务器 B/S架构 B/S(Browser/Server):浏览器/服务器 相对于C/S应用程序而言， B/S应用程序更容易访问且部署维护时更加方便 1.Tomcat ①URL的组成 https://localhost:8080/myProject/index.jsp http:协议(Hypertext Transfer Protocol):超文本传输协议 Ip:服务器的地址 Port:端口号,让那个程序相
【JavaWeb】TableDemo 表格隔行显色+鼠标悬停高亮显示
coralime的博客
08-30 1006
【普通表格-非隔行显色】 approach1 &lt;script type="text/javascript"&gt; window.onload = function () { //#-----非隔行显色---需要css辅助------------------------------------------- funct...
java web利用Ajax获取后端servlet的数据利用echats可视化显示
拼命小李博客
01-24 795
1.根据我们的项目目录创建对应的文件 2.创建好我们所需的servlet以及Product之后我们敲上我们的代码 servlet.java(对应的servlet的代码) package servlet; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java....
实现Java Web开发的关于echarts可视化动态数据展示
server643的博客
12-16 6178
实现Java Web开发的关于可视化动态数据展示 echarts是一个实现动态数据展示最方便的图形化展示工具。它能够完成数据实时传递更新并且能够完成页面直观的展示。最开始时，echarts是由百度设计出来的可视化js库，后面捐给了阿帕奇开源。不过我们仍然可以使用它。 Java Web实现步骤： 1、客户端实现ajax请求 2、服务器端在Servlet接受请求 3、生成一个json数据(柱状图、折线图表示) 4、客户端接收数据后显示 1、发送ajax请求 首先我们要了解echarts的基本格式内容。 引入
初入社会面试题总结——前端基础
weixin_38718704的博客
06-17 195
前端面试题总结 Jquery 1.$是什么，$()是什么，$.是什么 $是指juery对象，$.据面向对象原则可以获得其属性和行为。例如$.get(),$.ajax()都是获取此jquery对象内部的方法。$()则是Juery()方法，其作用是用于将任何对象包裹成juery对象，它会根据传递参数处理结果，返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。 2.简述Jquery中的选择...
Web 应用程序中提交表单时处理 GIF 动画的最佳实践
lujiancs的专栏
09-02 982
简介： 在 Web 应用中的提交表单时，为了很好的用户体验或防止表单重复提交，我们通常会从请求发起那一刻开始，展示出一个动态的 GIF 图标来提示用户请求正在处理。本文将介绍在传统的提交方式下，如何巧妙地使用 Javacript 方式来解决请求发起时 IE 浏览器下动态沙漏图标不播放的问题，以及在请求完成后点击浏览器回退按钮，Firefox 浏览器依旧显示着沙漏图标的问题。 随着各行各业
SSM框架使用Echarts绘制动态数据可视化图表
热门推荐
空空说技术的博客
07-14 2万+
SSM框架使用Echarts绘制动态数据可视化图表 1.前言 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 而在实际开发中使用的往往会要求...
基于javaweb电子相册系统源码+数据库，ajax+jsp+servlet实现的电子相册
01-28
这是一个基于JavaWeb技术实现的电子相册系统，它利用了Ajax、JSP、Servlet等核心技术，结合数据库存储用户上传的照片和相关信息，为用户提供一个在线查看、管理个人照片的平台。以下将详细介绍这些关键技术及其在...
Java资源/java学习练习项目 javaWeb+Axios+ajax+Mybatis+vue
06-21
JavaWeb 介绍 javaWeb+Axios+ajax+Mybatis+vue 软件架构 软件架构说明 登录,注册没有写，也不需要写吧。 基于element-ui+javaweb+mybatis使用 代码简洁明了，更新操作有些许瑕疵，但不影响使用。
基于JavaWeb Servlet+JSP+MYSQL+Bootstrap 文章管理系统.zip
10-16
基于JavaWeb Servlet+JSP+MYSQL+Bootstrap 文章管理系统 基于JavaWeb Servlet+JSP+MYSQL+Bootstrap 文章管理系统 基于JavaWeb Servlet+JSP+MYSQL+Bootstrap 文章管理系统 基于JavaWeb Servlet+JSP+MYSQL+Bootstrap ...
javaweb+mysql数据库实现注册登录程序
03-06
本项目"javaweb+mysql数据库实现注册登录程序"旨在教你如何使用Java Web技术和MySQL数据库来创建这样一个系统。以下是这个项目涉及到的关键知识点： 1. **Java Web基础**：Java Web开发主要涉及Servlet、JSP（Java...
【Mybatis】mapper.xml文件中SQL语句传入多个参数方法
coralime的博客
05-23 2万+
#1#-> 适用于单个参数： 接口文件： public void deleteData(int id) throws Exception; mapper.xml文件：#{}占位符对应传入的参数，可以随意写字符串标识符，但最好还是和传入参数对应起来，保持良好的可读性 <delete id="deleteData" parameterType="int"> de...
【DataTable】行折叠与展开问题记录
coralime的博客
06-06 5071
官网行折叠的例子：http://www.datatables.club/example/user_share/row_details.html #-1> 初始版本： <table>的初始结构放在<body>里， 通过ajax从后台Servlet取数据，根据某个下拉框查询刷新表格数据 每一次刷新会触发drawTable()函数 function drawTa...
【JavaWeb】解决IE低版本不兼容问题记录
coralime的博客
09-17 3550
【问题描述】 原先的代码已在Google Chrome、Edge、IE11上通过测试，因项目需求，需要在IE8及以下的版本上兼容运行。 各个IE版本的问题记录 IE10，IE11没问题 IE9：能运行，但CSS动画效果降级为静止了 IE8及以下版本：CSS动画效果直接失效，不能运行，版本越低CSS布局也会发生轻微变化 调试报错    【解决方法】 jQuery版本问题 jQ...
javaweb servlet+jsp量表
11-30
基于JavaWeb Servlet+JSP的量表系统可以通过以下步骤实现： 1.创建数据库表格，包括量表信息、题目信息、选项信息和用户答题记录信息等。 2.使用Servlet实现用户登录、注册、修改密码等功能。 3.使用JSP实现量表列表展示、量表详情展示、答题页面展示等功能。 4.使用Servlet和JSP实现用户答题记录的增加、查询、修改和删除等功能。 5.使用Bootstrap等前端框架美化页面，提高用户体验。 以下是一个简单的基于JavaWeb Servlet+JSP的量表系统的代码示例： 引用:基于JavaWeb Servlet+JSP+MYSQL+Bootstrap 文章管理系统 基于JavaWeb Servlet+JSP+MYSQL+Bootstrap 文章管理系统 基于JavaWeb Servlet+JSP+MYSQL+Bootstrap 文章管理系统 基于JavaWeb Servlet+JSP+MYSQL+Bootstrap ... 引用: ```java <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>量表详情</title> </head> <body> <h1>量表详情</h1> <table> <tr> <td>量表名称：</td> <td>${scale.name}</td> </tr> <tr> <td>量表描述：</td> <td>${scale.description}</td> </tr> <tr> <td>题目列表：</td> <td> <table> <c:forEach items="${scale.questions}" var="question"> <tr> <td>${question.content}</td> <td> <c:forEach items="${question.options}" var="option"> <input type="radio" name="${question.id}" value="${option.id}">${option.content} </c:forEach> </td> </tr> </c:forEach> </table> </td> </tr> </table> <form action="submit" method="post"> <input type="hidden" name="scaleId" value="${scale.id}"> <input type="submit" value="提交"> </form> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值