如何在ajax动作后刷新jsp页面

时间:2012-03-29 07:22:29

标签: java javascript mysql ajax jsp

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

  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 height="30" align="center" valign="middle" class="vtd" width="3%">
    <%=dayCount%>
    </td>
   <td height="30" align="center" valign="middle" class="vtd" width="3%">
    <%=exerciseGroupName%>
     </td>

    <td height="30" align="center" valign="middle" class="vtd" width="3%">
    <%=exerciseName%>
    </td>
    <td height="30" align="center" valign="middle" class="vtd" width="3%">
     <%=sets%>

    </td>
    <td height="30" align="center" valign="middle" class="vtd" width="3%">
    <%=reps%>
    </td>
   <td height="30" align="center" valign="middle" class="vtd" width="3%">
   <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>

3 个答案:

答案 0 :(得分:0)

就你的问题而言,在你的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

下面是stackoverflow的线程。 ajax and jsp integration 以上链接还为您提供了其他可能的解决方案..

享受编码......:)

答案 1 :(得分:0)

您可以使用

刷新相同的位置

location.reload(true)

答案 2 :(得分:0)

好吧,在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。它将简化您的代码,并具有很大的灵活性和浏览器兼容性。