javascript 提交jsp表单后仍停留在同一页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12197885/
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
Remain in same page even after submitting jsp form
提问by Rakesh
I'm using a jsp to post data to a servlet, but after posting the data i want to stay back insame jsp. Briefly: 1) I have a jsp here with 2 textboxes. i use a javascript to copy data from one to another on a button click. 2) I use the same button to post data to a database. 3) I want both the actions to be done at a time and should not go to the third jsp(servlet post result), but , should go to another jsp i use.
我正在使用 jsp 将数据发布到 servlet，但在发布数据后，我想留在同一个 jsp 中。简而言之：1）我在这里有一个带有 2 个文本框的 jsp。我使用 javascript 在单击按钮时将数据从一个复制到另一个。2）我使用相同的按钮将数据发布到数据库。3）我希望同时完成这两个操作，不应该转到第三个jsp（servlet post result），但是，应该转到我使用的另一个jsp。
i'm able to handle these 2 things seperately but together i'm unable to do it. the data gets updated in database and shows a new line in the first text(that's my fault i'm using the redirect way) or moves the data from first textbox to another and doesn't do the data posting. please help me about doing it. below is the code piece i used to do it.
我能够单独处理这两件事，但一起处理我无法做到。数据在数据库中更新并在第一个文本中显示一个新行（这是我的错，我使用重定向方式）或将数据从第一个文本框移动到另一个文本框并且不进行数据发布。请帮我做这件事。下面是我用来做的代码片段。
java script to copy data and post data are:
复制数据和发布数据的java脚本是：
function move(){
document.getElementById('tgt1').value = document.getElementById('Allocation').value;
document.getElementById('Allocation').value="";
document.getElementById("Send").disabled=true;
}
function invoke(but)
{
if(but==0)
{
document.myform.action="Alloc_Insert.do";
}
the methods for the button are declared as follows:
按钮的方法声明如下：
<table><tr><center><td><input type="Submit" value="Allocate" id="Send" onClick="invoke(0);move();" style="width:150px" style="font-size:100%"/></td></center></tr> </table>
and the servlet code i used are as follows.
我使用的servlet代码如下。
ResultSet rs=null;
String Add=request.getParameter("tgt1");
String user=(String) session.getAttribute("myusername");
Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();Date d1 = new Date();
String d1_str = new SimpleDateFormat("yyyy-MM-dd").format(d1);
Connection con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:XE","system","tiger");
PreparedStatement ps=con.prepareStatement("UPDATE SCOPE1 SET ALLOCATED='"+d1_str+"', SPECIALIST='"+user+"' WHERE DBID='"+Add+"'");
con.setAutoCommit(true);
int i=ps.executeUpdate();
if(i==1)
{
String redirectURL= "Update_Counts.jsp";
response.sendRedirect(redirectURL);
}
else{
out.print("retry");
}
i want to post the data aswell as be on the same with the textbox value copied into second textbox, as i would be using it for my further referrence.
我想发布数据以及与复制到第二个文本框的文本框值相同，因为我将使用它作为我的进一步参考。
Thanks
谢谢
回答by Rakesh
As I mentioned in my comment, consider javascript asynchronous calls (AJAX) to your servlet.
正如我在评论中提到的，考虑对您的 servlet 进行 javascript 异步调用 (AJAX)。
In this case your page won't change and you can do all your interaction with the server in the background.
在这种情况下，您的页面不会更改，您可以在后台与服务器进行所有交互。
If you are not experienced Javascript programmer, then consider this JavaScript tutorial
如果您不是经验丰富的 Javascript 程序员，请考虑此 JavaScript 教程
JSP on its nature is a servlet, i.e it is server side code, but you can embed javascript to your JSP page, that will work on the client's browser (client side), and send/receive data packets to the server in the background, without submitting the whole page to the server.
JSP 本质上是一个 servlet，即它是服务器端代码，但是您可以将 javascript 嵌入到您的 JSP 页面中，这将在客户端的浏览器（客户端）上工作，并在后台向服务器发送/接收数据包，无需将整个页面提交给服务器。
回答by Russell Gutierrez
You can invoke ajax in your jsp like this:
你可以像这样在你的jsp中调用ajax：
function test(tg1){
context = '${pageContext.request.contextPath}';
var http_request = getXMLHttpRequest();
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
http_request.open("POST", context + "/ServletName?tgt1=" + tg1, true);
http_request.onreadystatechange = function() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var response = http_request.responseText;
//do something if you have a response from the servlet
}
}
};
http_request.send(null);
}
In your servlet, remove your redirect code.
在您的 servlet 中，删除您的重定向代码。
ResultSet rs=null;
String Add=request.getParameter("tgt1");
String user=(String) session.getAttribute("myusername");
Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();Date d1 = new Date();
String d1_str = new SimpleDateFormat("yyyy-MM-dd").format(d1);
Connection con = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:XE","system","tiger");
PreparedStatement ps=con.prepareStatement("UPDATE SCOPE1 SET ALLOCATED='"+d1_str+"', SPECIALIST='"+user+"' WHERE DBID='"+Add+"'");
con.setAutoCommit(true);
int i=ps.executeUpdate();
You can add a response from the servlet using response.getWriter().write("something");
您可以使用从 servlet 添加响应 response.getWriter().write("something");
回答by Germann Arlington
In your code I can see (parts of) 2 JavaScript functions move()and invoke(but).
The first one moves data from one DOM element ('Allocation') to another ('tgt1').
The second is attempting to submit data to the server/jsp page.
在您的代码中，我可以看到（部分）2 个 JavaScript 函数move()和invoke(but).
第一个将数据从一个 DOM 元素（'Allocation'）移动到另一个（'tgt1'）。第二个是尝试向服务器/jsp 页面提交数据。
Is that correct and that what you are trying to do?
那是正确的，那是你想要做的吗？
BTW: you should call them in the order of move(); invoke(...);, NOT other way around because once the form is submitted move() will not run - nothing can happen on the client side, because the processing left the page.
顺便说一句：你应该按顺序调用它们move(); invoke(...);，而不是相反，因为一旦提交表单，move() 将不会运行 - 在客户端不会发生任何事情，因为处理离开了页面。
I noticed that in your move() function you disable DOM element "Send" (document.getElementById("Send").disabled=true;) which happens to be your submit button. This action will prevent the form from being submitted, so you should probably remove that line.
我注意到在你的 move() 函数中你禁用了 DOM 元素“发送”（document.getElementById("Send").disabled=true;），它恰好是你的提交按钮。此操作将阻止提交表单，因此您可能应该删除该行。
