javascript ajax动作后如何刷新jsp页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9920799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to refresh the jsp page after ajax action
提问by Jitendra verma
My problem is I have one html table in jsp page .And i applied dragging and dropping technique for row ordering .I am also saving new order to DB(Mysql) By calling action through AJAX.and displaying the order By using order by sql query .but for second time it is not working well because i am not able to get new rows order for TR id.Please sir share your view on that.I am doing dragging and dropping through Javascript code which is like that:
我的问题是我在 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)
}
and my Html table code is like that.
我的 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>
采纳答案by DHRUV BANSAL
As far as I under your question your are not getting desired output after your ajax call. I am giving you some links which we get you through complete concept understanding and solution to your problem i.e. implementation of ajax call on jsp.
就我在您的问题中提出的问题而言，您在 ajax 调用后没有获得所需的输出。我给你一些链接，我们让你通过完整的概念理解和解决你的问题，即在 jsp 上实现 ajax 调用。
Concept flow diagram of AJAX: how ajax works on web page http://www.w3schools.com/ajax/ajax_intro.asp
AJAX 的概念流程图：ajax 如何在网页上工作 http://www.w3schools.com/ajax/ajax_intro.asp
If you already know above that... implementation on AJAX on jsp.. here one of the many possible solutions... http://newtechies.blogspot.in/2007/12/simple-example-using-ajax-jsp.html
如果您在上面已经知道......在jsp上实现AJAX......这里是许多可能的解决方案之一...... http://newtechies.blogspot.in/2007/12/simple-example-using-ajax-jsp。 html
Below is thread of stackoverflow only over this. ajax and jsp integrationAbove link gives you other possible solutions also..
以下是仅在此之上的 stackoverflow 线程。 ajax 和 jsp 集成上面的链接也为您提供了其他可能的解决方案..
Enjoy coding... :)
享受编码... :)
回答by DHRUV BANSAL
You can refresh your same location using
您可以使用刷新相同的位置
location.reload(true).
location.reload(true).
回答by tusar
Well, in success of the AJAX call you need to refresh the page. so inside your AJAX call I write as :
好吧，为了成功调用 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");
}
}
}
But I am afraid that your gfdgdiv, which have some new data will get lost after reloading the page. You could another AJAX call instead of refreshing.
但是我担心您的gfdgdiv，其中有一些新数据，在重新加载页面后会丢失。您可以进行另一个 AJAX 调用而不是刷新。
One more point, you are using the classic AJAX, instead use a more advanced library like jQuery AJAX. It will simplify your code and has much flexibility and browser compatibility.
还有一点，您正在使用经典的 AJAX，而不是使用更高级的库，如jQuery AJAX。它将简化您的代码并具有很大的灵活性和浏览器兼容性。
