`
annan211
  • 浏览: 461202 次
  • 性别: 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>
分享到:
评论

相关推荐

    Jackson相关jar包,springMVC的Ajax请求,JSON

    总结来说,Jackson库在处理Spring MVC中的Ajax请求时,主要负责将Java对象转换为JSON格式,以及从JSON数据反序列化回Java对象。通过这种方式,前端和后端可以高效地交换数据,实现Web应用的动态交互。而Ajax则允许...

    AJAX_JSON每秒刷新数据

    在AJAX请求中,服务器返回的数据通常是JSON格式,因为JSON与JavaScript语法紧密相关,可以直接被JavaScript对象解析。 在`UserServlet.java`这个Java Servlet中,我们需要实现以下步骤: 1. 处理AJAX请求:通过检查...

    自定义shiro实现识别ajax请求的拒绝返回json,还是普通返回页面

    当 `onAccessDenied()` 被调用时,如果判断是 AJAX 请求,我们可以通过 `response.getWriter().write(jsonErrorMessage)` 将错误信息以 JSON 格式写入响应,其中 `jsonErrorMessage` 是一个包含错误信息的 JSON ...

    Ajax与servlet后台交互,数据类型JSON

    // 将json写入响应 response.getWriter().write(json); } ``` 2. **设置Content-Type**:在Servlet中,需要设置响应头`Content-Type`为`application/json`,告知浏览器响应数据的类型。 ```java response....

    ajax+serlvet json格式数据操作

    在与Ajax配合时,Servlet接收来自客户端的Ajax请求,处理数据,然后以JSON格式返回结果。在Servlet中,我们可以使用`HttpServletResponse`对象的`getOutputStream()`或`getWriter()`方法来写入JSON字符串。 为了...

    Jquery ajax json 总结

    更通用的 AJAX 方法是 `$.ajax()`, 允许自定义更多的选项,如请求类型、URL、数据、成功的回调函数以及预期的数据类型。在 `$.ajax()` 示例中,`success` 回调函数在请求成功时执行,`dataType` 指定了期望的响应...

    Spring3 MVC Ajax with JSON

    在Ajax请求中,JSON是传输数据的理想选择,因为它可以被JavaScript直接解析为对象,减少了数据处理的复杂性。 ### 5. 整合步骤 1. **配置Spring MVC**:在`DispatcherServlet`的配置文件中启用注解驱动的MVC,可能...

    ajax+servlet+json应用

    4. **响应**:Servlet将JSON格式的数据写入到HttpServletResponse的输出流中,作为Ajax请求的响应。 5. **客户端接收**:前端JavaScript的Ajax回调函数接收到服务器的响应,解析JSON数据,然后更新DOM(Document ...

    AjaxJson应用小例子

    这个过程既包括了服务器端的JavaBean和JSONObject的使用,也涵盖了客户端的Ajax请求和JSON解析。这种技术组合在现代Web开发中非常常见,能够提高应用程序的交互性和效率。理解并掌握这一流程对于任何想要深入学习Web...

    SSM 关于向前台返回json数据问题

    - 前端(如JavaScript或jQuery)通过Ajax请求获取JSON数据,可以使用`$.ajax`、`$.getJSON`或`fetch`等API。 - 接收到JSON数据后,解析并展示在页面上。 4. **异常处理和自定义JSON错误响应** - 当服务器端发生...

    struts2返回JSON数据的两种方式

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛用于前后端交互,尤其是在AJAX请求中。Struts2提供了一套方便的机制来支持JSON数据的处理。 ### 第一种方式:使用`response.getWriter().print...

    Java+servlet+jsp页面ajax请求

    在AJAX请求中,Servlet负责处理来自客户端的AJAX请求,执行相关操作并返回JSON或XML格式的数据。 2. **JSP**:JSP是Java的视图层技术,可以用于创建动态HTML、XML或其他格式的文档。在AJAX场景下,JSP通常用来生成...

    浅析Ajax后台success传来json数据的问题.docx

    在jQuery的Ajax请求中,`dataType`设置为"json",后台代码如示例所示,直接将JSON字符串写入响应流,前端的success回调中的`data`参数就是解析好的JSON对象,可以直接访问其属性,如`data[0].demoData`。 ```...

    asp输出json对象实例

    5. 客户端通过AJAX请求获取JSON数据,然后使用JavaScript的`JSON.parse()`方法解析为JavaScript对象。 通过这个实例,你可以学习到如何在ASP环境中处理JSON数据,以及如何利用AJAX进行前后端的数据交互。这在现代...

    java json ajax util

    在这个项目中,我们看到了几个关键的Java类,它们可能是用于处理JSON和辅助进行AJAX请求的实用工具。 1. **StreamUtil.java**:这个类可能包含了对输入/输出流的操作,例如读取或写入文件、网络流等。在处理JSON时...

    ajax+json+servlet下载

    在IT行业中,Ajax(Asynchronous JavaScript and XML)技术是一种用于创建快速、动态网页的重要方法,它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。结合JSON(JavaScript Object ...

    json的方式传输数据的小案例

    7. **前端交互**:在前端,通常使用JavaScript的`fetch` API或者jQuery的`$.ajax`方法发送JSON数据到服务器,并通过回调函数接收并处理服务器返回的JSON数据。例如,使用`fetch`: ```javascript fetch('/servlet-...

    Java通过jQuery实现ajax异步请求

    综上所述,"Java通过jQuery实现ajax异步请求"的示例工程涵盖了客户端与服务器端的交互流程,包括使用jQuery发起AJAX请求、Java后端处理请求并返回数据,以及数据格式的转换和错误处理。了解并掌握这些知识点,对于...

    ajax用json实现数据传输

    然后,我们使用JSONObject的put方法来构建JSON数据,并将其写入到响应输出流中。这样客户端就可以接收到JSON格式的数据了。 在客户端,可以通过AJAX技术来请求这些数据。如果使用jQuery库,AJAX请求代码可以写得...

Global site tag (gtag.js) - Google Analytics