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和电子邮件。

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

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资源，将数据发布到，并让它更新你的数据服务器端。

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

然后你的ajax调用需要定义函数来更新页面，具体取决于服务器的响应（取决于你的调用是成功还是失败）。下面是将HTML表单序列化为对象的一些示例代码，然后将其“字符串化”为json，对其余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)
    });
}

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

3 个答案: