ajax定时刷新列表

最新推荐文章于 2024-06-13 17:22:40 发布

置顶胡德刚

最新推荐文章于 2024-06-13 17:22:40 发布

阅读量1k

点赞数

分类专栏： ajax 文章标签： ajax 定时刷新局部刷新 ajax返回值得处理

本文链接：https://blog.youkuaiyun.com/hudegang_35/article/details/49506385

版权

ajax 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何使用Ajax技术在JSP页面上实现定时刷新功能，通过发送POST请求到指定action，处理返回的JSON数据，动态更新表格内容。在页面加载时启动定时器，每隔1秒调用sendRequest()函数进行数据刷新。当Ajax请求失败时，会弹出提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在jsp页面ajax的写法（先导包）:

function sendRequest(){

$.ajax({

url: "checkneedless/demo/listSubscribe1.action", //ajax跳转的action

type:"post", //提交类型

dataType:"json", //返回数据类型，这里举得列是返回一个数组，第一个为String，第二个为一个object，object里面有一些属性，和一个object的集合，

data: "pageNumber=" + pageNumber+"&commodityID="+commodityID, //参数，也可以是数组等数据类型。

    success:function(data){    //对应返回值得处理一般根据具体情况来定，最好的处理方式时，在页面调断点看返回值得结构，如下图
      var json = eval(data);
     var flag=json[0];    //第一个String

var json1=json[1]; //获取第一个object

var result=json1.result; //获取object里面的object集合

var a=json1.a; //获取object里面的其他属性

      var html="<tr class='font_b tr_bg' >"
      html+="<td width='10%' align='center'><div class='ordercol' id='tc.commodityId'>商品代码</div></td>";
      html+="<td width='15%' align='center'><div class='ordercol' id='tc.name'>商品名称</div></td>";
     html+="</tr>";
     for(var i in result){      //遍历最后一个object集合的值

       var commodityid="commodity"+i;
        html+="<tr>";
        html+="<td align='center' id='"+commodityid+"'>"+result[i].COMMODITYID+"</td>";
        html+="<td align='center'>"+result[i].COMMODITYNAME+"</td>";
        html+="</tr>";
      }
    $("#sendRequest").html(html);   //将拼接的HTML放到对应的位置

   error:function(){
     alert(“ajax请求失败！”);
    }
});

}

$(function () { //加载页面的时候就会调用定时刷新
setInterval("sendRequest()", 1000); //每隔1秒刷新点击量
});

</SCRIPT>

<body οnlοad="sendRequest()"> //加载<body>的时候调用一下，在开发时候，可以将上面的定时刷新注释掉，编码完成后，将定时刷新放开，将οnlοad="sendRequest()"删除即可。

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="sendRequest">//拼接的HTML将放到这个里面

</table>

</body>