更新“提交”按鈕上的數據並停留在同一頁面上

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