更新提交按钮上的数据并保持在同一页面上

Question

我有以下 jsp 页面，其中 table 填充了 java 代码中 arraylist 的数据。我将 table 行放在输入标签中以便能够编辑它们。我现在要做的是在编辑数据后保存数据并仍然停留在同一页面上。我想我可以使用 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 以显示为 table 给用户。当用户更改页面中的值时，我需要更新该值（通过 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>

Answer 1

我不知道条纹，但我知道如何在 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")获取电话号码和邮箱。

根据自己的技术修改这段代码。

Answer 2

使用jquery.post方法异步发送数据

jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

data 从表单引用您的 post 数据，例如您的 pnr 或 email.

在此处查看演示：

http://jsfiddle.net/52jb3xLk/

Answer 3

您需要创建某种服务器端请求处理程序来调用更新后的数据。另一个 jsp 页面，一个 rest-api，等等。您可以调用一些 url 资源，post 数据，并让它更新您的数据服务器端。

关于 ajax，这是您在不离开页面的情况下调用该资源的方式。 JQuery 是一个 javascript 库，它在很多方面简化了脚本编写，包括进行 ajax 调用。 Jquery ajax call

然后您的 ajax 调用需要定义函数以根据服务器的响应更新您的页面（取决于您的调用是成功还是失败）。下面是一些示例代码，用于将 HTML 表单序列化为对象，然后 "stringify" 将其序列化为 json，运行 ajax 调用 rest api，并在您的页面上回复它。

//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)
    });
}

更新提交按钮上的数据并保持在同一页面上

Update data on submit button and stay on the same page

javascript

jquery

jsp

stripes