在提交按钮上更新数据并停留在同一页上
我有下面的jsp页面，其中有一个用java代码的arraylist中的数据填充的表。我将表行放在input标记中，以便能够编辑它们。我现在想做的是在编辑数据后保存数据，并且仍然留在同一页上。我想我可以使用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>编辑过的版本:我在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>回答 3
Stack Overflow用户
发布于 2015-02-02 23:00:56
我不知道条纹，但我知道如何在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>您可以使用request.getParameter(" phoneNo ")和request.getParameter(" email ")来获取电子邮件和电子邮件。
根据您的技术对此代码进行更改。
Stack Overflow用户
发布于 2015-02-02 23:05:12
使用jquery .post方法异步发送数据。
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)data从表单引用你的帖子数据，比如你的pnr或email。
请在此处查看演示：
Stack Overflow用户
发布于 2015-02-02 23:28:12
您需要创建某种类型的服务器端请求处理程序，以便使用更新后的数据进行调用。另一个jsp页面，一个rest-api等等。一些url资源，你可以调用，发布数据，并让它更新你的数据服务器端。
关于ajax，这是您在不离开页面的情况下调用该资源的方式。JQuery是一个javascript库，它在很多方面简化了脚本编写，包括进行ajax调用。Jquery ajax call
然后，您的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)
});
}https://stackoverflow.com/questions/28280286
复制相似问题
腾讯云开发者
