关于ajax:1活动html

45次阅读

共计 4595 个字符,预计需要花费 12 分钟才能阅读完成。

html 页面~~~~

<!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>

正文完
 0