jsp+ajax 无刷新更新页面数据?? 求助？实例？？

jsp+ajax 无刷新更新页面数据?? 有没有demo？

解决方案 »

  1.   

    是这意思不？
    js:
    <script type="text/javascript">
    function change(){
    var req = new XMLHttpRequest();
    req.open("get","<%=request.getContextPath()%>/servlet/MyServlet",true);
    req.onreadystatechange = function(){
    if(req.readyState == 4 && req.status == 200){
    var obj = window.eval("("+req.responseText+")");
    var tbl = document.getElementById("mytable");
    //for(var i=0;i<=tbl.rows.length;i++){
    //tbl.deleteRow(1);
    //}
    for(var i=0;i<obj.length;i++){
    //var tr1 = tbl.insertRow();
    //var td1 = tr1.insertCell() ;//添加一个单元格（一列）
    //td1.innerHTML=obj[i].id ;  //标题显示内容
    //var td2 = tr1.insertCell() ; //添加一个单元格（一列）
    //td2.innerHTML=obj[i].name ; //标题显示内容
    tbl.rows[i+1].cells[0].innerHTML=obj[i].id;
    tbl.rows[i+1].cells[1].innerHTML=obj[i].name;
    }
    }
    };
    req.send(null);
    setTimeout("change()",1000);
    }
    </script>jsp:
    <body onload="change()">
        <table id="mytable" border=1>
         <tr>
         <th>编号</th>
         <th>姓名</th>
         </tr>
         <tr>
         <td>1</td>
         <td>啊啊</td>
         </tr>
         <tr>
         <td>2</td>
         <td>版本</td>
         </tr>
         <tr>
         <td>3</td>
         <td>常常</td>
         </tr>
        </table>
      </body>servlet:
    public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException { response.setContentType("text/html;charset=utf-8");
    response.setCharacterEncoding("UTF-8");
    response.setHeader("Cache-Control", "no-store");
    PrintWriter out = response.getWriter();
    int id1 = new Random().nextInt(100);
    int id2 = new Random().nextInt(100);
    int id3 = new Random().nextInt(100);
    int name1 = new Random().nextInt(7);
    int name2 = new Random().nextInt(7);
    int name3 = new Random().nextInt(7);
    String[] names={"反对","热","饭店","前期","版本","谔谔","很好","看看"};
    out.println("[{'id':"+id1+",'name':'"+names[name1]+"'},{'id':"+id2+",'name':'"+names[name2]+"'},{'id':"+id3+",'name':'"+names[name3]+"'}]");
    out.flush();
    out.close();
    }
      

  2.   

    <script type="text/javascript" src="js/jquery-1.7.js"></script>
    <script type="text/javascript">
    function findbyid() {
    $.ajax( {
    url : "findByStockId.action",
    type : "post",
    dataType : "json",
    data : {
    "id" : $("#id").val()
    },
    success : function(obj) {
    $("#name").text(obj.stock.stockName);
    $("#price").text(obj.stock.price);
    $("#closeprice").text(obj.stock.closeprice);
    $("#openprice").text(obj.stock.openprice);
    $("#maxprice").text(obj.stock.maxprice);
    $("#minprice").text(obj.stock.minprice);
    }
    });
    }
    </script>
    研究半天，终于出来了，跟大家分享。。
      

  3.   

    查点jquery资料。如果掌握了jquery，相信的你问题也会迎刃而解
      

  4.   

    可能是缓存的问题，在你的url后面加随机数如
    url:"/xxx/xx.jsp?t=" + (new Date()).valueOf()