javascript 更新提交按钮上的数据并保持在同一页面上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28280286/
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
Update data on submit button and stay on the same page
提问by nahid
I have the following jsp page in which there is a table populated with data from arraylist in java code. I put table rows in input tag to be able to edit them. what I want to do now is to save data after editing them and still stay on the same page. I think I can use either javascript/jquery or ajax call and I've read about some solutions using them, but don't know actually how to use it to make it work! Any hints or suggestions would be appreciated alot!
我有以下 jsp 页面，其中有一个表，其中填充了 Java 代码中来自 arraylist 的数据。我将表格行放在输入标签中以便能够编辑它们。我现在想要做的是在编辑数据后保存数据并仍然停留在同一页面上。我想我可以使用 javascript/jquery 或 ajax 调用，我已经阅读了一些使用它们的解决方案，但实际上不知道如何使用它来使其工作！任何提示或建议将不胜感激！
<stripes:form beanclass="SaveStudent.action">
<table>
<c:forEach var="array" items="${actionBean.importExcel }">
<tr>
<td><input type="text" value="${array.getStudent().getPersonalNumber() }" name="pnr"/></td>
<td><input type="text" value="${array.getStudent().getEmail() }" name="email"/></td>
</tr>
</c:forEach>
</table>
<p>
<stripes:submit name="saveExcel" value="save"/>
</p>
</stripes:form>
Edited version: I have an array in java which I passed to jsp to be displayed as a table to user. when user change a value in the page, I need that value get updated(done by Ajax call(answered already, see following!)) and then shown to the user and at the same time get updated in the array in java code. My problem now is that how to pass variable from JQuery to jstl/jsp. I tried following, but not working, I don't know what I'm doing wrong!
编辑版本：我在java中有一个数组，我将它传递给jsp以作为表显示给用户。当用户更改页面中的值时，我需要更新该值（通过 Ajax 调用完成（已回答，请参阅下文！））然后显示给用户，同时在 Java 代码的数组中更新。我现在的问题是如何将变量从 JQuery 传递到 jstl/jsp。我试过，但没有用，我不知道我做错了什么！
<script>
$(document).ready(function() {
$("#click").click(function(){
var pnr = $("#pnr").val();
$.ajax({
type:"POST",
url:"newImport.jsp",
data: pnr,
success:function(data){
$("#pnr").html(data);
alert('Update success!');
},
failure: function(data){
alert('Update Failed!');
}
});
});
});
</script>
<%
String pnr = request.getParameter("pnr");
out.println(pnr);//For test
%>
<table>
<c:forEach var="array" items="${actionBean.importExcel }">
<tr>
<c:choose>
<c:when test="${request.getParameter('pnr')=='null'}">
<td><input type="text" value="${array.getStudent().getPersonalNumber() }" id="pnr" name="pnr"/>
</td>
</c:when>
<c:otherwise>
<td><input type="text" value="${request.getParameter('pnr') }" id="pnr" name="pnr"/>
</td>
</c:otherwise>
</c:choose>
</tr>
</c:forEach>
</table>
回答by The Coder
I dont know about stripes, but I know how to do it in ajax.
我不知道条纹，但我知道如何在 ajax 中做到这一点。
<form>
<input type="text" id="phoneNumber" name="phoneNumber"/><br>
<input type="text" id="email" name="email"/><br>
<button type="button" id="submit">Submit</button>
<form>
<script type="text/javascript">
$("#submit").click(function() {
var phoneNo = $("#phoneNumber").val();
var email = $("#email").val();
$.ajax({
url: 'yourActionPath',
type: 'POST',
data: {
phoneNo: phoneNo,
email: email
},
success: function(data) {
alert('Update Success');
},
failure: function(data) {
alert('Update Failed');
}
});
)};
</script>
You can get the phoneNo and email by using request.getParameter("phoneNo") and request.getParameter("email").
您可以使用 request.getParameter("phoneNo") 和 request.getParameter("email") 获取电话号码和电子邮件。
Make changes in this code according to your technology.
根据您的技术更改此代码。
回答by Bandon
Use jquery .postmethod to send data asynchronously.
使用 jquery.post方法异步发送数据。
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
datarefers your post data from form, like your pnror email.
data从表单中引用您的帖子数据，例如您的pnr或email。
See demo here:
在此处查看演示：
回答by Doug
You need to create a server-side request handler of some sort to call with your updated data. Another jsp page, a rest-api, etc. Some url resource you can call, post data to, and have it update your data server side.
您需要创建某种类型的服务器端请求处理程序来调用更新的数据。另一个jsp页面，一个rest-api等。一些url资源你可以调用，发布数据，并让它更新你的数据服务器端。
Regarding ajax, that is the way you would call that resource without leaving your page. JQuery is a javascript library that simplifies scripting in a lot of ways, including making ajax calls. Jquery ajax call
关于 ajax，这是您在不离开页面的情况下调用该资源的方式。JQuery 是一个 javascript 库，它在很多方面简化了脚本编写，包括进行 ajax 调用。Jquery ajax调用
Then your ajax call needs to have functions defined to update your page depending on the server's response (depending on if your call was successful or failed). Here's some example code to serialize an HTML form to an object, then "stringify" it to json, run an ajax call to a rest api, and respond to it on your page.
然后你的ajax调用需要定义函数来根据服务器的响应更新你的页面（取决于你的调用是成功还是失败）。这是一些示例代码，用于将 HTML 表单序列化为对象，然后将其“字符串化”为 json，运行对 rest api 的 ajax 调用，并在您的页面上响应它。
//serializes an object, in this case used for a form
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
//returns json representation of <form id="myForm">
function getData()
{
var retVal = JSON.stringify($('#myForm').serializeObject());
return retVal;
}
//makes the ajax call to server
function submitform()
{
$.ajax({
type: "POST",
url:'/LicenseService/v1/license',
data: getData(),
beforeSend: function(){$('#loadingDiv').show();}
}).done(function(data) {
//code to run when the call is successful
}).fail(function(data) {
//code to run when the call encounters an error
}).complete(function(data){
//code to run no matter what (runs after done or fail)
});
}
