更新“提交”按钮上的数据并停留在同一页面上

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”）获取电话号码和电子邮件。

根据您的技术在此代码中进行更改。

Answer 2

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

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

data是指您来自表单的帖子数据，例如pnr或email 。

在此处查看演示：

http://jsfiddle.net/52jb3xLk/

Answer 3

您需要创建某种服务器端请求处理程序，以使用更新后的数据进行调用。 另一个jsp页面，rest-api等。您可以调用一些url资源，将数据发布到该URL资源，并使其更新数据服务器端。

关于ajax，这就是您不离开页面即可调用该资源的方式。 JQuery是一个javascript库，它通过许多方式简化了脚本编写，包括进行ajax调用。 jQuery Ajax调用

然后，您的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)
    });
}