当前位置:首页 > 开发 > Web前端 > Ajax > 正文

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

发表于: 2013-05-31   作者:annan211   来源:转载   浏览次数:
摘要: <script type="text/javascript" charset="utf-8">             var myForm;        &nb
<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>

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
需要使用的框架 spring3.0 jquery1.9.0(简化ajax开发的js库) Jackson(json处理器):jackson-core-as
通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好
通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好
通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好
第一种方法: 项目当中我希望把一个对象方便的封装成JSON对象,当然需要导入相关Jar 包 json-lib-2.2.
jQuery1.10.3的官方文档中,有以下几种方法实现ajax请求 试了get getJSON post,区别不大,从使用角
写这篇文章是因为我上面Ztree的文章引发的我对js的研究,不明白的可以先看看上面Ztree的返回数据那
javascript 代码: $.ajax({ url: "http://10.255.32.250/recent_done_seven_days", data: '', data
jQuery Ajax请求XML格式数据 HTML部分: <body> <form action='javascript:void(0);' meth
利用了pyinotify库,我用的是这里的这个,https://github.com/seb-m/pyinotify 其实网上yum上也有py
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号