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

Question

我有以下 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>

编辑版本:我在 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>

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") 获取phoneNo 和email。

根据您的技术更改此代码。