ajax操作后如何刷新jsp页面

Posted

技术标签:

【中文标题】ajax操作后如何刷新jsp页面【英文标题】:how to refresh the jsp page after ajax action 【发布时间】:2012-04-12 19:54:43 【问题描述】:

我的问题是我在 jsp 页面中有一个 html 表。我应用拖放技术进行行排序。我还通过 AJAX 调用操作将新订单保存到 DB(mysql)。并使用订单显示订单通过 sql 查询。但是第二次它不能正常工作,因为我无法获得 TR id 的新行顺序。请先生分享您对此的看法。我正在通过 javascript 代码进行拖放,就像这样:

  this.onDrop = function(table, droppedRow ) 
    var rows = this.table.tBodies[0].rows;
    var debugStr = "";
    for (var i=0; i<rows.length; i++) 
        debugStr += rows[i].id+" ";
        alert(debugStr);
        alert(droppedRow.id);
    
    // document.getElementById('debug').innerHTML = debugStr;
    function ajaxRequest()
        var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
        if (window.ActiveXObject) //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
            for (var i=0; i<activexmodes.length; i++)
                try
                    return new ActiveXObject(activexmodes[i])
                
                catch(e)
                //suppress error
                
            
        
        else if (window.XMLHttpRequest) // if Mozilla, Safari etc
            return new XMLHttpRequest()
        else
            return false
    

    //Sample call:
    var mypostrequest=new ajaxRequest()
    mypostrequest.onreadystatechange=function()
        if (mypostrequest.readyState==4)
            if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1)
                document.getElementById("gfdg").innerHTML=mypostrequest.responseText
            
            else
                alert("An error has occured making the request")
            
        
    
    //var namevalue=encodeURIComponent(document.getElementById("name").value)
    // var agevalue=encodeURIComponent(document.getElementById("age").value)
    var parameters="array="+debugStr+"&maxLimit="+droppedRow.id
    mypostrequest.open("POST", "tableAjaxUpdate.action", true)
    mypostrequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
    mypostrequest.send(parameters)

而我的Html表格代码就是这样的。

<tr id="<%= uniqueId%>"> / I am taking this row id from the db(from the exorder column)
    <% System.out.println("AAAuniqueId----->" + uniqueId); %>
    <td  align="center" valign="middle" class="vtd" >
    <%=dayCount%>
    </td>
   <td  align="center" valign="middle" class="vtd" >
    <%=exerciseGroupName%>
     </td>

    <td  align="center" valign="middle" class="vtd" >
    <%=exerciseName%>
    </td>
    <td  align="center" valign="middle" class="vtd" >
     <%=sets%>

    </td>
    <td  align="center" valign="middle" class="vtd" >
    <%=reps%>
    </td>
   <td  align="center" valign="middle" class="vtd" >
   <s:url id="idDeleteExName" action="deleteExNameInCustomtemplate">
        <s:param name="dayCount"> <%=dayCount%></s:param>
        <s:param name="cusExId"><%=cusExId%></s:param>
        <s:param name="routineId"><%=routineId%></s:param>
   </s:url>
  <s:a href="%idDeleteExName"><img src="images/tables/delete-icon.png" style="width: 35px;height: 35px;"></s:a>   
  </td>

【问题讨论】:

AJAX 用于在不刷新页面的情况下获取一些服务器端数据。如果要刷新页面,为什么要使用 AJAX ?请提交&lt;form&gt;。如果您的要求是在 AJAX 调用完成后刷新页面,那么 Javascript 中也有解决方法。但是如果没有看到你在做什么,就很难给出一些建议。如果仍有问题,请发布您的代码。 先生,当我将一行拖放到另一个位置时,这个 javascript 函数 this.onDrop = function(table, droppedRow) 正在调用,所以为了更新到服务器新的行顺序,我必须调用AJAX.YOu 可以在我的帖子中看到代码。执行操作后,我再次返回相同的 jsp,但这次我没有在 UI 中再次获得行 ID。请先生分享您的看法,我在这方面挣扎了很多天。 【参考方案1】:

就您的问题而言,您在 ajax 调用后没有得到想要的输出。 我给你一些链接,我们让你通过完整的概念理解和解决你的问题,即在 jsp 上实现 ajax 调用。

AJAX的概念流程图:ajax在网页上的工作原理 http://www.w3schools.com/ajax/ajax_intro.asp

如果您已经知道以上内容...在 jsp 上的 AJAX 实现...这里是众多可能的解决方案之一... http://newtechies.blogspot.in/2007/12/simple-example-using-ajax-jsp.html

下面是***的线程,仅在此之上。 ajax and jsp integration 上面的链接还为您提供了其他可能的解决方案..

享受编码... :)

【讨论】:

【参考方案2】:

好吧,在 AJAX 调用成功后,您需要刷新页面。所以在你的 AJAX 调用中我写成:

var mypostrequest=new ajaxRequest();
mypostrequest.onreadystatechange=function()
    if (mypostrequest.readyState==4)
        if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1)
            document.getElementById("gfdg").innerHTML=mypostrequest.responseText;
            //this is the success point of your AJAX call and you need to refresh here 
            window.location.reload(); //this is the code for reloading
            //but your "gfdg" div data will be lost if you refresh,
            // so start another AJAX call here 
        
        else
            alert("An error has occured making the request");
        
    

但是我担心你的gfdg div,有一些新的数据会在重新加载页面后丢失。您可以再次调用 AJAX 而不是刷新。

还有一点,您使用的是经典的 AJAX,而不是使用更高级的库,例如 jQuery AJAX。它将简化您的代码,并具有很大的灵活性和浏览器兼容性。

【讨论】:

先生,情况就像我将上面的html代码放在单独的jsp(call.jsp)中并将这个jsp(call.jsp)包含到另一个jsp中。现在我正在拖放表格行并更新服务器。并在 gfdg div 中返回 call.jsp 但我的 gfdg div 不刷新为什么? AJAX 调用真的返回一些值吗?如果您执行 alert(mypostrequest.responseText); 会发生什么【参考方案3】:

您可以使用刷新相同的位置

location.reload(true).

【讨论】:

我必须在我的 cade 中添加此代码以再次刷新页面。先生,我在上面发布了我的代码,请注意它。 我不知道你到底想在哪里刷新 jsp 页面。无论如何,你可以做一件事,像这样编写java脚本函数 并在您想重新安排的地方拨打电话...如果您有更多疑问,请在此处发布。 我想在服务器响应时再次加载上面的 html 代码。 ok 然后放在这里...if (mypostrequest.status==200 || window.location.href.indexOf("http")==-1) document.getElementById("gfdg" ).innerHTML=mypostrequest.responseText; location.reload(true);

以上是关于ajax操作后如何刷新jsp页面的主要内容,如果未能解决你的问题,请参考以下文章

jsp通过ajax返回的数据需要页面刷新后才能显示

ajax调用删除方法后,页面不手动刷新,就一直显示那信息

ajax跳转到新的jsp页面(局部刷新)

ajax刷新局部页面数据后js事件失效

ajax提交数据以后刷新当前页面,怎么实现

jsp登录页面,展示错误信息,刷新页面后错误依然存在解决方案