`
annan211
  • 浏览: 445809 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

ajax 请求回的json数据实时写入html

阅读更多
<script type="text/javascript" charset="utf-8">
            var myForm;
            var feedbackAddDialog;
            function clock() {
                $.ajax({
                    type: "POST",
                    url: 'feedbackAction!findFive.action',
                    dataType: 'json',
                    success: function(msg) {
                        $("#feedbackList").empty(); //清空原有网页内容
                        for (var i = 0; i < msg.length; i++) {
                            //创建行
                            var tr = document.createElement("tr");
                            //给奇偶行添加样式
                            if (i % 2 == 0) tr.setAttribute("class", "even");
                            else tr.setAttribute("class", "odd");
                            //创建列
                            var td0 = document.createElement("td");
                            //给列添加样式
                            td0.setAttribute("class", "thehead");
                            //序号
                            var va2 = document.createTextNode(i + 1);
                            td0.appendChild(va2);
                            tr.appendChild(td0);
                            //创建title列
                            var td2 = document.createElement("td");
                            td2.setAttribute("class", "thetd");
                            td2.setAttribute("title", msg[i].title);
                            var str = msg[i].title;
                            if (str.length > 20) {
                                str = str.substring(0, 12) + "...";
                            }
                            var val = document.createTextNode(str);
                            td2.appendChild(val);
                            tr.appendChild(td2);
                            //创建content列
                            var td3 = document.createElement("td");
                            td3.setAttribute("class", "thetd");
                            td3.setAttribute("title", msg[i].content);
                            var content = msg[i].content;
                            if (content.length > 20) {
                                content = content.substring(0, 45) + "...";
                            }
                            var val2 = document.createTextNode(content);
                            td3.appendChild(val2);
                            tr.appendChild(td3);

                            var td4 = document.createElement("td");
                            td4.setAttribute("class", "thetd");
                            var time = document.createTextNode(msg[i].createDt);
                            td4.appendChild(time);
                            tr.appendChild(td4);
                            document.getElementById("feedbackList").appendChild(tr);
                        }
                    }
                });
            }
            $(function() {
                clock();
                setInterval("clock()", 1000 * 60); //每分钟发送一次请求
            });
            $(document).ready(function() {

                $('#title').validatebox({
                    required: true
                });

                $('#content').validatebox({
                    required: true
                });

                myForm = $('#feedbackAddForm').form({
                    url: 'feedbackAction!add.action',
                    success: function(data) {
                        var json = $.parseJSON(data);
                        if (json && json.success) {
                            window.messageshow('成功', json.msg);
                            $('#title').val("");
                            $('#content').val("");
                            feedbackAddDialog.close();
                        } else {
                            window.messageshow('失败', '操作失败!');
                            feedbackAddDialog.close();
                        }
                    }
                });

                feedbackAddDialog = $('#feedbackAddDialog').show().dialog({
                    title: '添加意见反馈',
                    modal: true,
                    closed: true,
                    maximizable: true,
                    buttons: [{
                        text: '添加',
                        handler: function() {
                            $('#feedbackAddForm').submit();
                        }
                    }]
                });

                $("#addFeedback").click(function() {
                    feedbackAddDialog.dialog('open')
                });

            });
        </script>
        <div style="overflow: auto;height:150px;">
            <table class="pageList" cellspacing="0" style="width:98%;">
                <thead>
                    <tr>
                        <td width="30" class="thehead">
                            <button class="sys-btn" style="width:30px;" id="addFeedback">
                                <b></b>反馈
                            </button>
                        </td>
                        <td align="center" width="30" class="thehead">标题</td>
                        <td align="center" class="thehead">内容</td>
                        <td width="30" class="thehead" align="center">
                            时间
                        </td>
                    </tr>
                </thead>
                <tbody id="feedbackList">
                </tbody>
            </table>
        </div>
        <div id="feedbackAddDialog" style="display: none;width: 500px;height: 300px;"
        align="center">
            <form id="feedbackAddForm" method="post">
                <table cellpadding="0" cellspacing="0" align="center">
                    <tr>
                        <td valign="top" height="auto">
                            <table cellpadding="0" cellspacing="0" style="width:100%;">
                                <tbody>
                                    <tr height="50px">
                                        <td width="80" height="50" align="right">
                                            标题:
                                        </td>
                                        <td colspan="3" width="360">
                                            <input type="text" style="width:100%;border: 1px solid; #99cccc;" name="title"
                                            id="title" maxlength="50" missingMessage="请填写标题" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="80" align="right">
                                            内容:
                                        </td>
                                        <td colspan="3">
                                            <textarea rows="8" name="content" id="content" maxlength="300" style="width:100%; border: 1px solid; #00ccff"
                                            missingMessage="请填写内容">
                                            </textarea>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
分享到:
评论

相关推荐

    python爬虫中“动态网页”如何爬取.pdf

    这是因为涉及到了”动态网页数据“这个词了,简单而言,就是后台的数据不是请求网页链接时就已经将数据写入到相应的标签上了,而是利用ajax请求将后台的数据写入到相应的标签上。通常要得到这些数据,可以有两种方式...

    PHP+Ajax网站开发典型实例

    实例 59数据无刷新写入文本文件 实例60 提供自动完成 实例61 实现级联菜单的设计 实例62 PHP+Ajax树状菜单 第8章 Ajax数据库操作 实例63 显示数据库系统信息 实例64 实现数据库常见操作 实例65 完成数据库...

    JavaScript完全自学宝典 源代码

    20.2.html 使用JSON值的数组封装数据。 json2.js JSON的.js库文件。 testJson.war 使用JSON与服务器传递信息的项目文件(可直接在Tomcat下发布运行)。 \lib目录 在Java中使用...

    基于Vue和SpringBoot的在线考试系统,优秀毕业设计系统,计算机er必看!

    在线考试系统,采用vue与springcloud微服务架构开发,前后端完全分离,json格式数据交互,全部由本人独立开发完成。目前项目已部署在本人的学生版阿里云centos7服务器上。 主要功能有:对班级和科目的管理;对试题...

    用vue与springcloud微服务架构开发的在线考试系统

    项目简介:在线考试系统,采用vue与springcloud微服务架构开发,前后端完全分离,json格式数据交互,全部由本人独立开发完成。目前项目已部署在本人的学生版阿里云centos7服务器上。 ​主要功能有:对班级和科目的...

    源码JSP+Java+Servlet+DM8+Echarts动态网页

    1.客户端通过ajax发送请求; 2.服务器端Servlet接收请求; 3.后端JAVA通过JDBC SQL获取数据库数据; 4.生成Json数据并返回给客户端; 5.客户端接收数据后,绘制图表显示。 源码主要使用JSP+Java+Servlet+DM8+...

    Android 常用六大框架

    (3) 网络模块:通过httpclient进行封装http数据请求,支持ajax方式加载,支持下载、上传文件功能。 (4) 图片缓存模块:通过FinalBitmap,imageview加载bitmap的时候无需考虑bitmap加载过程中出现的oom和android...

    JAVA上百实例源码以及开源项目

     Java数据压缩与传输实例,可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...

    一个适合新手学习的电商项目

    使用jsonp返回商品目录(ajax方式动态加载) ### 代码: /** * 购物车Service */ @Service public class CartServiceImpl implements CartService { @Value("${REST_BASE_URL}") private String REST_BASE...

    JAVA上百实例源码以及开源项目源代码

     Java数据压缩与传输实例,可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲区、写入数据到文件、关闭输入流、关闭套接字关闭输出流、输出错误信息等Java编程小技巧。 Java数组倒置...

    Java面试宝典2020修订版V1.0.1.doc

    9、java后台如何接收ajax数据? 26 10、为什么要有jquery? 26 11、jQuery选择器有多少种? 27 13、你是如何使用jquery中的ajax的? 27 14、jquery中的$.get和$.post请求区别? 27 15、jquery中如何操作样式的? 28 ...

    java登录答题系统源码-exam_online_hongfurui:在线考试系统,java,vue,springboot,springclo

    前端后台管理系统由vue与elementUI搭建,路由使用vue-router,前端在线考试系统由nuxt搭建,ajax请求均使用axios。 vsCode工具开发 后台 mysql数据库,mybatis(通用Mapper、PageHelper分页助手) springBoot(spring、...

    ink-for-construct:构造3的墨水插件

    使用内置的AJAX插件请求文件,然后将Load story操作及其响应一起使用。 Tada,您已经在游戏中添加了一个墨水故事! 加载和保存状态 墨水通过自己的变量和故事进展来管理自己的状态。 保存游戏时,还应该保存故事...

    java开源包1

    Jackson 是一个 Java 用来处理 JSON 格式数据的类库,性能非常好。 哈希计算工具 java-hash 用来计算 MD5、SHA 哈希算法的 Java 类库,支持 "MD5", "SHA", "SHA-1", "SHA-256", "SHA-384", "SHA-512". 高性能RPC...

Global site tag (gtag.js) - Google Analytics