u010622828
gang_qi_xi_2
采纳率10.5%
2019-09-24 16:53

如何实现在jsp中,进行操作后数据及时更新在网页?

5

如何实现在jsp中,对进行增删操作后,数据立即在当前页面更新结果呢?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

5条回答

  • caozhy 回答这么多问题就耍赖把我的积分一笔勾销了 2年前

    增删改后,在onsubmit中调用jquery的append、text等方法,动态追加和修改网页。将结果显示出来。

    采纳率有点低

    如果采纳了包括之前几个问题中我的回答以及这个回答,并且给出你的html,我可以具体写给你。

    点赞 5 评论 复制链接分享
  • dabocaiqq dabocaiqq 2年前

    给你一个无刷新更新的例子
    https://blog.csdn.net/fengsigaoju/article/details/54767081

    %@ page language="java" import="java.util.*" contentType="text/html;charset=utf-8"%>
    <html>
      <head>
       <title>My JSP 'index.jsp' starting page</title>
       <script>
        window.οnlοad=function(){
         setInterval("change()",50);
        }
       function change(){
        var i=Math.random();//目的是使页面不一样  
        createRequest('check.jsp?id='+i);
       }
       function createRequest(url){//初始化XMLHttpRequest对象
       http_request=false;
       if (window.XMLHttpRequest){
       http_request=new XMLHttpRequest();
       }else if (window.ActiveXObject){
       try{
       http_request=new ActiveXObject("Msxml2.XMLHTTP");
       }catch(e){
       try{
       http_request=new ActiveXObject("Microsoft.XMLHTTP");
       }catch(e){}
       }
      }
    
       if (!http_request){
       alert("不能创建XMLHTTPRequest对象");
       return false;
       }
       http_request.onreadystatechange=getResult;//这边指定一旦接受到返回值就提交到getResult处理
       http_request.open('GET',url,true);
       http_request.send(null);
      }
       function getResult(){
       if (http_request.readyState==4){
       if (http_request.status==200){
        var result=http_request.responseText;//获取到json数据
        var json=eval("("+result+")");//解析json数据
        setContent(json);//进行DOM操作
       }
       else
       {
       alert("您所请求的页面有错误");
       }
       }
       }
        function setContent(contents){//将json数据解析并输出到页面上
        var size=contents.length;
        var p=document.getElementById("content_table_body").parentNode;//先将之前的删除
        p.removeChild(document.getElementById("content_table_body"));
        var c=document.createElement("tbody");
        c.setAttribute("id","content_table_body");
        p.appendChild(c);
        for (var i=0;i<size;i++){
       var nextNode=contents[i].id;//代表的是json格式数据的第i个元素的id
       var nextNode2=contents[i].student_name;//第i个元素的姓名
       var tr=document.createElement("tr");
       var td=document.createElement("td");
       var text=document.createTextNode(nextNode);
       var td2=document.createElement("td");
       var text2=document.createTextNode(nextNode2);
       td2.appendChild(text2);
       tr.append(td2);
       td.appendChild(text);
       tr.appendChild(td);
       document.getElementById("content_table_body").appendChild(tr);
       }
       }
      </script>
      </head>
       <body>
       <table id="content_table" bg color="#FFFAFA" border="1">
       <tbody id="content_table_body"><!-- 动态查询的数据显示的数据 对tbody进行操作-->
        </tbody>
       </table>
      </body>
    </html>
    

    问题解决请采纳我的回答

    点赞 2 评论 复制链接分享
  • weixin_41763995 _鹿慕溪水 2年前

    增删改操作后,使用ajax请求后台接口,重新获取当前页的数据,并渲染进表格里

    点赞 2 评论 复制链接分享
  • w1453114339 Yz_Jesse 2年前

    完成增删改操作之后,再调用一次查询方法,增删改成功之后,发送请求,请求后台查询,局部刷新列表。或者更简单的就是reload() 方法,刷新整个页面。

    点赞 1 评论 复制链接分享
  • wilson1966 wilson1966 2年前

    数据实时重整最简单的方法是前端采用easyUI DataGrid。
    当数据新增或删除后,只要下一指命
    $('#dgList').datagrid('reload');

    就立即完成数据更新,不用刷网页
    快速又方便

    点赞 评论 复制链接分享