同步表格异步表格

最新推荐文章于 2023-07-17 09:45:00 发布
最新推荐文章于 2023-07-17 09:45:00 发布
阅读量125 收藏
点赞数
分类专栏： 网站前台 文章标签： xhtml java javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wentao365/article/details/84288982
版权 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>作者列表</title>
    <link href="${pageContext.request.contextPath}/css/table.css" rel="stylesheet" type="text/css"/>
    <link href="${pageContext.request.contextPath}/css/jquery.loadmask.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery.cookie.js"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/js/com.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.loadmask.js"></script>
</head>
<body>
    <br>
    <table class="tableList" cellpadding="0" cellspacing="1" align="center">
        <caption>
            作者列表
            <span style="float:right;color:#FF0000;">说明：同步方式加载 </span>
        </caption>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>简介</th>
            <th>类型</th>
            <th>keyword</th>
            <th>description</th>
            <th>创建时间</th>
        </tr>
        <c:forEach var="item" items="${list}" varStatus="status">
            <tr>
                <td class="col_id">${item.id}</td>
                <td>${item.name}</td>
                <td>${item.brief}</td>
                <td>${item.type}</td>
                <td>${item.keyWord}</td>
                <td>${item.description}</td>
                <td class="col_time"><fmt:formatDate value="${item.timeCreate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
            </tr>
        </c:forEach>
    </table>

    <br>
    <table id="ajaxTable" class="tableList" cellpadding="0" cellspacing="1" align="center">
        <caption>
            作者列表
            <span style="float:right;color:#FF0000;">说明：异步方式加载 </span>
        </caption>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>简介</th>
            <th>类型</th>
            <th>keyword</th>
            <th>description</th>
            <th>创建时间</th>
        </tr>
        <c:forEach var="item" items="${list}" varStatus="status">
            <tr>
                <td class="col_id">${item.id}</td>
                <td>${item.name}</td>
                <td>${item.brief}</td>
                <td>${item.type}</td>
                <td>${item.keyWord}</td>
                <td>${item.description}</td>
                <td class="col_time"><fmt:formatDate value="${item.timeCreate}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
            </tr>
        </c:forEach>
    </table>
<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
                    url : "/bms/bauthor_list_ajax.tbao" ,
                    type : "post",
                    data : {
                        prodId : 0
                    },
                    beforeSend : function() {
                        $('#ajaxTable').mask("正在提交数据，请稍候。");
                    },
                    success : function(responseObj, statusText, xhr) {
                        var tableObj = document.getElementById('ajaxTable');
                        //清除表格中原有数据
                        var rowLength = tableObj.rows.length;
                        for (var i = 1; i < rowLength; i++) {
                            tableObj.deleteRow(1);
                        }
                        //添加新的数据
                        for (var i = 0; i < responseObj.length; i++) {
                            var rowData = responseObj[i];
                            var newRow = tableObj.insertRow(tableObj.rows.length);
                            var cell_0 = newRow.insertCell(0);
                            var cell_1 = newRow.insertCell(1);
                            var cell_2 = newRow.insertCell(2);
                            var cell_3 = newRow.insertCell(3);
                            var cell_4 = newRow.insertCell(4);
                            var cell_5 = newRow.insertCell(5);
                            var cell_6 = newRow.insertCell(6);
                            cell_0.innerHTML = rowData["id"];
                            cell_1.innerHTML = rowData["name"];
                            cell_2.innerHTML = rowData["brief"];
                            cell_3.innerHTML = rowData["type"] ? rowData["type"] : '';
                            cell_4.innerHTML = rowData["keyWord"] ? rowData["keyWord"] : '';
                            cell_5.innerHTML = rowData["description"] ? rowData["description"] : '';
                            cell_6.innerHTML = rowData["timeCreate"];
                        }

                        $(".tableList tr:odd").css("background-color", "#F2F9FF");
                        $(".tableList tr:even").css("background-color", "#E8F2FA");
                        $('#ajaxTable').unmask();
                    }
                });
    });
</script>

</body>
</html>


[img]http://dl.iteye.com/upload/attachment/0073/7652/9746d868-e022-3de3-bf38-21203d8a35e3.png[/img]
wentao365
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
理解同步和异步通信：以ROS的3中典型通信机制为例
weixin_41855010的博客
12-20 2821
一、ROS中的几种通信机制 在ROS中，不同的进程可以可以被视为不同的节点，节点之间的数据传输需要通过消息通信来完成，常见的消息通信类型有话题、服务、动作、参数等，我们可以用下面这张表来说明。 二、不同通信机制的特点 我们从上面可以简单看出不同通信机制的特点：其中单向消息发送/接收方式的话题（topic）；双向消息请求/响应方式的服务（service）；双向消息目标（goal）/结果（result）/反馈（feedback）方式的动作（action）。另外，节点中使用的参数可以从外部进行修改。这在大的框架
使表单支持异步提交
liudajiang的专栏
09-17 654
每次页面中写异步请求时需要写一些重复性的代码，为什么html的表单不支持异步请求呢？无奈只好自己扩展一个了 先设计最终的使用效果 我希望给表单一个class标记，标识它提交时使用ajax提交，class名就定为"ajaxForm"吧请求的url使用form的action，数据使用表单中元素的数据在form标签中加入一个onSuccess属性用来处理成功后逻辑， 处理成功后首先弹出服务
异步提交 表格异步提交
10-22
异步提交 表单的提交 可以实现无刷新页面提交
ajax WebService 对表格数据的异步获取和处理 实例.doc
08-22
通过ajax技术 和WebService 对表格数据的异步获取和处理（经典）
使用Ajax实现页面表格添删改查的异步刷新操作
10-20
AJAX实现页面表格的添删改查操作，异步刷新，有温馨手册，直接部署到项目即可使用，数据库已备，非常方便的代码。
异步添加表格数据
Hello World
07-25 287
若页面表格用异步提取相关数据，可采用如下方案:1、在页面加载生成一个隐藏空白的table行，提取数据时填充空白行并且让其显示。 2、       未完待修改……...
异步表格控件源码下载
08-01
异步表格控件源码 dotNetFlexGrid是一款asp.net原生的异步表格控件，它的前身是Jquery FlexiGrid插件，我们重构了FlexiGrid的大部分Javascript代码，使其工作的更有效率，BUG更少；同时将其封装为asp.net 控件，提供了简单易用的使用方式。 dotNetFlexGrid作为一个轻量级的表格控件，同时提供了大量实用和高效的功能： 控件本身是全异步的工作模式，表格数据的刷新无需重新刷新整个页面。提供了若干易用的客户端方法，让你的程序在添加、修改、删除表格数据时无需重新加载大量的表格数据，而仅需要更新客户端展现结果，这样使得程序的后台访问次数大大降低。采用了类似AjaxPro的异步回调方式，使得您不必重新为异步请求单独开发页面，通过简单的数据提供函数，您能够在同一个页面中完成所有的表格异步操作。dotNetFlexGrid提供了作为一个Grid应有的全部功能，包括表格排序、列拖动、首行的复选框、斑马色、快速查询、显示和隐藏列等等。
Javascript vue.js表格分页，ajax异步加载数据
10-21
将获取到的数据赋值给`items`以更新表格内容，同时更新`pageAll`以同步分页组件的状态。 此外，父组件的初始数据`items`用于存储表格的数据显示，`pageAll`记录总页数。当页面加载时，可以根据服务端返回的总条目数...
Ajax请求中的异步与同步，需要注意的地方说明
10-28
例如，描述中的表格数据加载就是一个异步过程，因此在数据未加载完成时执行的业务处理可能会被后来的数据覆盖。 **同步请求** 在某些特定情况下可能会被使用，例如需要确保某些数据在执行下一步操作之前已经获取到...
同步和异步的关系，区别 请用表格标识
05-13
以下是同步和异步的区别： | 同步 | 异步 | | :-------------------: | :------------------------------: | | 调用发起方等待响应 | 调用发起方不需要等待响应 | | 调用和响应是一一对应的 | 调用和响应不一定是...
dataTable重新异步加载表格数据
yuan487639的博客
09-01 1912
如果表格的数据不是固定的，譬如需要根据时间等参数变化，那么不可避免的需要异步加载数据。 需要注意的是，dataTable表格对象不允许两次初始化，所以你不能简单粗暴的再次执行表格的构建方法，官方文档提供了相关的表格数据重新加载的方法，这里记载一下。 之前说过，dataTable数据来源可以直接对data属性赋值，或者使用ajax属性发起请求。我原本以为官方会提重置data的方法，不过在官网...
FlinkSQL自定义函数开发
最新发布
2301_77342543的博客
07-17 822
Flink SQL 的自定义函数是用户可以自行编写的一种函数，用于扩展 Flink SQL 的功能。自定义函数可以在 SQL 查询中被调用，以完成用户自定义的数据处理逻辑。在 Flink SQL 中，自定义函数分为标量函数、表函数和聚合函数三种类型。
ajax异步请求，生成表格，局部刷新
songbaiyiran的专栏
10-20 2万+
先来一段简单的html表单：<form onsubmit="return false" id="formAddtr" method="post"> <input type="text" name="id"> <button id="select1" onclick="subForm()">查询</button> </form>注意要写上onsubmit=”return false”，
表单同步提交和异步提交
方嘉贤的博客
01-28 1244
1.同步提交 1.1 表单具有默认的提交行为，默认是同步的，同步表单提交，浏览器会锁死（转圈儿）等待服务端的响应结果 1.2 表单同步提交之后，无论服务器响应的是什么，都会直接把响应结果覆盖掉当前页面 2.异步提交 客户端可以通过服务端返回的数据处理更丰富的交互效果 ...
ajax异步获取数据后动态向表格中添加数据(行)
热门推荐
一个Java菜鸟(同微信公众号)
09-15 5万+
因为某些原因，项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面，网上找了半天都没有 看到现成的，决定自己写个例子 1、HTML页面 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;xx信息查询...
form表单同步提交和异步提交
lieyanhaipo的专栏
11-09 2万+
同步提交： html:<form id="form" method='"post" action="${ctx}/user/saveUser"> <input type="text" id="name" name="name" value="${user.name}"/> <input type="text" id="age" name="age" value="${user.ag
Python爬虫入门（二）：使用requests和xpath爬取论坛发帖列表
WhyLW的博客
08-03 685
安装lxml pip install lxml 代码 import requests from bs4 import BeautifulSoup as bs import time import lxml url = "https://bbs.hupu.com/bxj-postdate" useragent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值