首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在提交按钮上更新数据并停留在同一页上

在提交按钮上更新数据并停留在同一页上
EN

Stack Overflow用户
提问于 2015-02-02 22:47:09
回答 3查看 14.5K关注 0票数 2

我有下面的jsp页面,其中有一个用java代码的arraylist中的数据填充的表。我将表行放在input标记中,以便能够编辑它们。我现在想做的是在编辑数据后保存数据,并且仍然留在同一页上。我想我可以使用javascript/jquery或ajax调用,我已经读到了一些使用它们的解决方案,但实际上不知道如何使用它来工作!任何提示或建议都将不胜感激!

代码语言:javascript
复制
        <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。我试着跟随,但不起作用,我不知道我做错了什么!

代码语言:javascript
复制
<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>
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2015-02-02 23:00:56

我不知道条纹,但我知道如何在ajax中做到这一点。

代码语言:javascript
复制
<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 ")来获取电子邮件和电子邮件。

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

票数 2
EN

Stack Overflow用户

发布于 2015-02-02 23:05:12

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

代码语言:javascript
复制
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

data从表单引用你的帖子数据,比如你的pnremail

请在此处查看演示:

http://jsfiddle.net/52jb3xLk/

票数 2
EN

Stack Overflow用户

发布于 2015-02-02 23:28:12

您需要创建某种类型的服务器端请求处理程序,以便使用更新后的数据进行调用。另一个jsp页面,一个rest-api等等。一些url资源,你可以调用,发布数据,并让它更新你的数据服务器端。

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

然后,您的ajax调用需要定义一些函数来根据服务器的响应更新页面(取决于您的调用是成功还是失败)。下面是一些示例代码,用于将HTML表单序列化为对象,然后将其“串行化”为json,运行对rest api的ajax调用,并在页面上对其进行响应。

代码语言:javascript
复制
//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)
    });
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28280286

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档