`
lengchaotian
  • 浏览: 281115 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

jquery 中的ajax+json 无刷新提交

阅读更多
js代码
function timerFreq()
{
var ss = Math.random();
// 实现页面无刷新调用timer方法
$.ajax(
{
type : 'POST',
url : path + '/alltimer/timerFreq',
data : 'id=' + ss + "&type=" + type,
success : function(msg)
{
var data = JSON.parse(msg);

// 循环
$.each(data, function(k, v)
{
if ("intra" == type)
{
$("#" + v['hnbIdentifier'] + v['intraCid']).html(v['status']);
}
else
{
$("#" + v['hnbIdentifier'] + v['interCid']).html(v['status']);
}

if ("离线" == v['status'])
{
$(("#" + v['hnbIdentifier'] + v['intraCid'])).css("color", "red");
$(("#" + v['hnbIdentifier'] + v['interCid'])).css("color", "red");
}
else
{
$(("#" + v['hnbIdentifier'] + v['intraCid'])).css("color", "black");
$(("#" + v['hnbIdentifier'] + v['interCid'])).css("color", "black");
}
});
},
error : function(msg, textStatus, e)
{
window.location = path + "/login.jsp";
}
});

// 定时器:每20秒访问下数据库
window.setTimeout(timerFreq, 20000);
}

jsp代码:
<c:if test="${type != null }">
                <c:if test="${type eq 'intra' }">
                   <td id="${freq.hnbIdentifier }${freq.intraCid}"></td>
                </c:if>
                <c:if test="${type eq 'inter' }">
                   <td id="${freq.hnbIdentifier }${freq.interCid}"></td>
                </c:if>
                </c:if>

java后台代码:

  @RequestMapping("/timerFreq")
    public void timerIntraFreq(HttpServletRequest request, HttpServletResponse response)
    {
        try
        {
            //从request范围内取type的值,用来判断同频和异频小区
            String type = request.getParameter("type");
           
            //初始化timerList对象
            List<TimerList> timerList = null;
           
            //初始化变量
            String interFreqID = "";
            String intraFreqID = "";
            String intraCid = "";
            String interCid = "";
           
            //初始化StringBuffer对象
            StringBuffer sb = new StringBuffer();
           
            //根据类型判断是同频小区还是异频小区,类型是intra是同频小区,否则是异频小区
            if ("intra".equals(type))
            {
                //得到基站标识和状态的集合
                timerList = timerService.getIntraFreqCellTimer();
            }
            else
            {
                timerList = timerService.getInterFreqCellTimer();
            }
            //得到集合的长度
            int size = timerList.size();
           
            int i = 0;
           
            //开始拼sb字符串
            sb.append("[");
           
            //便利集合取得相对应的值存入StringBuffer sb
            for (TimerList timerList2 : timerList)
            {
                //循环一次i自加1
                i++;
                String hnbIdentifier = timerList2.getHnbIdentifier();
                String statu = timerList2.getStatus();
                String internetID = timerList2.getInternetID();
                String status = null;
               
                if (null == statu || "".equals(statu))
                {
                    status = "离线";
                }
                else if (statu.equals("1"))
                {
                    status = "在线";
                }
                else
                {
                    status = "离线";
                }
               
                //判断同频小区和异频小区,如果type="intra"是同频小区否则是异频小区
                if ("intra".equals(type))
                {
                    if (null != timerList2.getIntraFreqID())
                    {
                        intraFreqID = timerList2.getIntraFreqID();
                    }
                    else
                    {
                        intraFreqID = "";
                    }
                    if (null != timerList2.getIntraCid())
                    {
                        intraCid = timerList2.getIntraCid().toString();
                    }
                    else
                    {
                        intraCid = "";
                    }
                }
                else
                {
                    if (null != timerList2.getInterFreqID())
                    {
                        interFreqID = timerList2.getInterFreqID();
                    }
                    else
                    {
                        interFreqID = "";
                    }
                   
                    if (null != timerList2.getInterCid())
                    {
                        interCid = timerList2.getInterCid().toString();
                    }
                    else
                    {
                        interCid = "";
                    }
                }
               
                sb.append("{\"hnbIdentifier\":\"");
                sb.append(hnbIdentifier);
                sb.append("\",\"status\":\"");
                sb.append(status);
                sb.append("\",\"internetID\":\"");
                sb.append(internetID);
                sb.append("\",\"intraFreqID\":\"");
                sb.append(intraFreqID);
                sb.append("\",\"intraCid\":\"");
                sb.append(intraCid);
                sb.append("\",\"interFreqID\":\"");
                sb.append(interFreqID);
                sb.append("\",\"interCid\":\"");
                sb.append(interCid);
                sb.append("\"}");
               
                //如果i小于size字符串sb中加","
                if (i < size)
                {
                    sb.append(",");
                }
            }
           
            sb.append("]");
           
            //拼好的字符串赋值给变量
            String json = sb.toString();
           
            //定义输出变量
            PrintWriter out = response.getWriter();
            out.write(json);
            out.flush();
            out.close();
        }
        catch (IOException e)
        {
            e.printStackTrace();
            logger.error(e);
        }
    }
分享到:
评论

相关推荐

    基于Jquery+Ajax+Json实现分页显示附效果图

    ### 基于JQuery、Ajax与JSON实现分页显示技术解析 #### 技术背景与应用场景 在现代Web开发中,数据展示是一项至关重要的功能。随着数据量的增长,简单的列表展示方式已不能满足用户体验的需求。为了提升用户体验,...

    jquery+ajax+json例子

    在Web开发中,jQuery、Ajax和JSON是三个非常重要的技术,它们共同构成了高效、动态的用户界面的基础。本文将深入探讨这些技术,并结合一个名为"TestJQuery"的示例来展示它们如何协同工作。 首先,jQuery是一个...

    jQuery+Ajax+PHP无刷新分页

    **jQuery+Ajax+PHP无刷新分页技术详解** 在网页开发中,无刷新分页是一种提升用户体验的重要技术,它使得用户在浏览大量数据时无需等待整个页面重新加载,只需要加载新内容即可。本篇将详细讲解如何利用jQuery、...

    asp.net中利用Jquery+Ajax+Json实现无刷新分页

    为了解决这个问题,我们可以利用jQuery、Ajax和JSON技术来实现无刷新分页。这个主题的"asp.net+Jquery+Ajax+Json"压缩包提供了一个完整的示例,展示了如何在ASP.NET中集成这些技术。 首先,jQuery是一个轻量级的...

    Jquery+ajax+json+servlet

    总的来说,`jQuery`简化了前端的JavaScript编程,`Ajax`提供了无刷新的交互体验,`JSON`作为数据交换格式提高了效率,而`Servlet`则负责后台的处理和逻辑控制。这四者结合,能够构建出高效、交互性强的Web应用。在...

    【ASP.NET编程知识】asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码.docx

    "ASP.NET编程知识:ASP.NET中利用Jquery+Ajax+Json实现无刷新分页的实例代码" 本文将详细介绍如何使用Jquery、Ajax和Json技术在ASP.NET中实现无刷新分页的实例代码。通过本文,读者将了解到无刷新分页的实现原理、...

    asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码

    在ASP.NET中,我们可以创建一个ASP.NET Web Form页面(如`AjaxJson.aspx`),并在后台代码(如`AjaxJson.aspx.cs`)中处理数据获取和计算分页信息。同时,我们需要在页面中包含必要的JavaScript库,如jQuery和用于...

    SpringMVC+JSON+mybatis+jQuery+Ajax+Maven做的无刷新登录,注册,修改密码以及校验并且赋有详细注释,以及增删改查功能

    注:此项目是用IntelliJ IDEA 13.1.3此软件编写而成,不过和myeclipse都差不多,本项目包含SpringMVC+JSON+mybatis+jQuery+Ajax+Maven做的无刷新登录,注册,修改密码,拦截器,如果用户没有登录则不能进行相应操作...

    项目组管理系统,Java+json+jQuery+ajax

    在这个系统中,Java后端可能通过RESTful API将数据以JSON格式发送到前端,或者接收前端提交的JSON数据进行处理。例如,当用户创建新项目或分配任务时,相关的数据会以JSON形式在客户端和服务器之间传递。 jQuery是...

    ajax+json实例

    AJAX+JSON在.NET环境中的应用大大提高了Web应用程序的交互性和效率,减少了不必要的页面刷新,提升了用户体验。通过理解并熟练掌握AJAX的异步通信机制以及JSON的数据交换格式,开发者能够构建出更加高效、流畅的Web...

    Struts+Jquery+Ajax+Json应用实例

    Struts、jQuery、Ajax以及JSON是Web开发中的四个关键技术,它们在构建动态、交互式的Web应用程序中发挥着重要...这就是Struts、jQuery、Ajax和JSON在实际应用中的典型整合,实现了前后端的无刷新通信,提高了用户体验。

    jquery+ajax+json+servlet实例源码

    在jQuery中,`$.getJSON()`或`$.ajax()`的dataType设置为'json',可以让jQuery自动处理JSON解析。在Servlet端,通常使用Gson或Jackson库将Java对象转换为JSON字符串。 4. **前后端数据交互**:在前端,jQuery的AJAX...

    jquery+ajax无刷新评论源码(包含无刷新分页)

    实现了获取评论无刷新,发表评论无刷新,www.sendawangluo.com页面获取评论时显示loading加载效果jquery真的是一个非常优秀的JS库,简单容易掌握,对于网页中的多级菜单、级联效果、Tab选项卡切换、图片轮转显示,...

    SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白

    这个压缩包中的资源,"SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白",显然提供了一个使用这些技术实现Ajax级联操作的实例。下面将详细介绍这些技术及其在Ajax操作中的应用。 **SSH ...

    Jquery + Json 无刷新分页

    Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access jQuery+ashx+JSON 用ashx来接收请求,数据格式为JSON 实现了批量(选择)操作,编辑接口(反回两个值给用户进行自定义操作) 删除,...

    springmvc + jquery + ajax + json 异步传递数据

    SpringMVC、jQuery、Ajax和JSON这四个技术的结合,为开发者提供了一种高效且灵活的方式来实现这一功能。接下来,我们将深入探讨这些技术以及它们如何协同工作。 SpringMVC是Spring框架的一部分,是一个强大的MVC...

    强大的AJAX+JSON+ashx无刷新分页源码

    【标题解析】:“强大的AJAX+JSON+ashx无刷新分页源码”是指一种基于AJAX、JSON和ASHX技术实现的网页无刷新分页功能的代码示例。AJAX(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下更新...

    ajax+json+java

    【标题】"Ajax + JSON + Java" 是一种常见的前端与后端交互技术组合,用于实现网页的异步数据更新,无需整个页面刷新。Ajax(Asynchronous JavaScript and XML)是利用JavaScript进行局部页面更新的技术,而JSON...

    jQuery+Json 实现Ajax无刷新分类管理实例演示

    基于jquery+json实现的网站后台管理中无刷新的分类管理功能演示,如上图演示所示,可无刷新添加一个分类、在动画弹出的对话框中输入分类名称即可实现保存,同进还可无刷新删除二级分类,删除一级分类,修改分类,...

    web前端+jquery与ajax+json+手写前端完全实现分页

    在分页中,Ajax可以实现无刷新加载新的数据页,提高用户体验,使用户能够流畅地在不同页面之间切换。 **JSON(JavaScript Object Notation)** 是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析...

Global site tag (gtag.js) - Google Analytics