1活动html

时间  2020-09-29
标签 活动 html 栏目 快乐工作 繁體版
原文   原文链接

html页面~~~~javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 加这两个标签是为了让移动端的设备优先 -->
<!-- css元素要在head表中添加元素 这个标签是引入bootstrap-->
<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
    
    rel="stylesheet">
<link href="/datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
</head>
<body>
    <!-- 主元素 -->
    <div class="container">
        <h1>The hello</h1>
        <!-- Button trigger modal -->
        <!-- class=bth bth-danger控制按钮的样式（颜色） -->
        <button type="button" class="btn btn-danger" data-toggle="modal"
            data-target="#myModal">点击添加</button>
        <!-- Modal -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">都是中国人玩什么洋文</h4>
                    </div>
                    <!--表单元素  -->
                    <div class="modal-body">
                        <!--若是须要添加多个form表单就要添加单个id的值  -->
                        <form action="doinsertObject" method="post">
                            <div class="form-group">
                                <label for="1exampleInputEmail1">滚滚滚</label> <input type="text"
                                    class="form-control" name="title" id="1exampleInputEmail1"
                                    placeholder="Email">

                            </div>

                            <div class="form-group">
                                <label for="exampleInputEmail1">滚滚驴</label> <select
                                    class="form-control" name="category" id="categoryId">
                                    <option value="training">教育机构</option>
                                    <option value="Playing">随便</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="2exampleInputEmail1">滚滚狗</label> <input type="text"
                                    autocomplete="off" class="form-control form_datetime"  name="startTime" id="2exampleInputEmail1"
                                    placeholder="Email">
                            </div>
                            <!-- autocomplete="off" 清楚缓存数据让日期表单直接显示出来-->        
                            <div class="form-group">
                                <label for="3exampleInputEmail1">滚滚熊</label> <input type="text"
                                    autocomplete="off" class="form-control form_datetime" name="endTime" id="3exampleInputEmail1"
                                    placeholder="Email">
                            </div>
                            <div class="form-group">
                                <lable for="remarkId">备注</lable>
                                <textarea class="form-control" name="remark" id="remarkId"></textarea>
                            </div>
                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary"
                            onclick="doinsertObject()">肯定</button>
                    </div>
                </div>
            </div>
        </div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>id</th>
                    <th>title</th>
                    <th>category</th>
                    <th>startTime</th>
                    <th>endTime</th>
                    <th>remark</th>
                    <th>state</th>
                    <th>createdTime</th>
                    <th>createdUser</th>
                </tr>
            </thead>
            <tbody id="tbodyId">
                <!--要把这里的数据清空 掉 换成加载后的数据  -->
                <tr>
                    <td>数据正在积极的加载中</td>
                </tr>
            </tbody>
        </table>
        <!-- 主元素 -->
    </div>

    <script type="text/javascript" src="/jquery.min.js"></script>
    <!-- 加载这个插件必定要把他放在jquery引入的下面 -->
    <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!-- 导入日期哪一个表格 -->
    <script src="/datepicker/js/bootstrap-datetimepicker.min.js"></script>
    <!-- 设置日期的格式用什么语言显示 -->
    <script src="/datepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript">
    //在指定位置初始化datepicker对像
    $(".form_datetime").datetimepicker({//经过类选择器获取的值想让哪一个时间变在哪一个name的class指定。form_datetime
         language:"zh-CN",//定义格式
         format:"yyyy/mm/dd hh:ii",
         autoclose:true
    })
    
    //基于此方式提交表单,表单中的元素必定要渔鸥name属性
    //而且name属性名的设计必定要与服务端接受参数时的设计相匹配
    function doinsertObject(){
        //$("form").submit();//提交数据
    //1.定义url反正就是使用异步加载最好是
    let url="doinsertObject";
    //2.定义情趣参数异步传参数方法
    var params={
    title:$("#1exampleInputEmail1").val(),//为jaqurey中或制定表单元素的value值
    category:$("#categoryId").val(),
    startTime:$("#2exampleInputEmail1").val(),
    endTime:$("#3exampleInputEmail1").val(),
    remark:$("#remarkId").val(),
    }
    //serialize()为jquery中直接获取表单数据方法
    //var params=$(#form这个是表单的名字)serialize();
    //console.log("params",params);输出一下语句//验证参数的值是否存在
    
    //这个是异步加载最好不要同步加载
    //3.发送异步请求
         $.ajax({
             type:"post",
             url:url,
                data:params,
                success:function(result){
                alert(result)//提示框
                    
                //隐藏模态框
                   $("#myModal").modal("hide");
                //重行执行查询在调用一次查询方法
                a();      
                }
          });
    }
    //向服务端发送异步请求获取活动信息并更新到页面上    
    function a(){//若是须要第二次调用就不要使用自调用函数了
            let url="doFindActivitys";
            let params={};//name=空值            
            //借助jquery中的ajax函数，向服务器发送异步请求获取活动信息    
            $.ajax({
            url:url,
            data:params,
            dataType:"json",
            success:function(result){
            doHandleQueryResult(result);//定义一个方法让下面的定义也能够直接写在这里面
                }
            });
        }//这个括号表明函数调用        
           a();
        //处理服务端返回的活动信息//1迭代result,并将result内容填充tbody位置
           function doHandleQueryResult(result){
            //1获取tbody对象，并清空原有内容
            var tBody=$("#tbodyId")//原生写法document。querySelector("#tbodyId");
            tBody.empty();//清空原有的内容
            //2迭代result，将活动信息追加到tbody中
            result.forEach((item)=>{//这里的item为一个变量，表明数组中的冒个元素
            tBody.append(//被替换替换后的数据 append添加新的数据；
            `<tr>
            <td>${item.id}</td>
            <td>${item.title}</td>
            <td>${item.category}</td>
            <td>${item.startTime}</td>
            <td>${item.endTime}</td>
            <td>${item.remark}</td>
            <td>${item.state==1?"有效":"无效"}</td>
            <td>${item.createdTime}</td>
               <td>${item.createdUser}</td>
            </tr>`
                );    
        
            });
        }
    </script>
</body>
</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程