Обновите данные на кнопке отправки и оставайтесь на той же странице

У меня есть следующая страница jsp, в которой есть таблица, заполненная данными из массива в коде Java. Я поместил строки таблицы во входной тег, чтобы иметь возможность редактировать их. Теперь я хочу сохранить данные после их редактирования и при этом остаться на той же странице. Я думаю, что могу использовать вызов 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>
Источник

3 ответа

Решение

Я не знаю о полосах, но я знаю, как это сделать в 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>

Вы можете получить phoneNo и электронную почту, используя request.getParameter("phoneNo") и request.getParameter("email").

Внесите изменения в этот код в соответствии с вашей технологией.

Источник

Используйте jquery .post метод отправки данных асинхронно.

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

data ссылается на ваши данные из формы, например, ваши pnr или же email,

Смотрите демо здесь:

http://jsfiddle.net/52jb3xLk/

Источник

Вам нужно создать какой-нибудь обработчик запросов на стороне сервера для вызова с вашими обновленными данными. Еще одна страница jsp, rest-api и т. Д. Некоторые URL-ресурсы, которые вы можете вызывать, публиковать данные и обновлять их на стороне сервера данных.

Что касается ajax, это то, как вы бы назвали этот ресурс, не покидая свою страницу. JQuery - это библиотека javascript, которая во многих отношениях упрощает создание сценариев, включая выполнение вызовов ajax. JQuery AJAX вызова

Тогда ваш ajax-вызов должен иметь функции, определенные для обновления вашей страницы в зависимости от ответа сервера (в зависимости от того, был ли ваш вызов успешным или неудачным). Вот некоторый пример кода для сериализации HTML-формы объекта, затем "зацепления" ее до json, запуска вызова ajax для остальных API и ответа на него на вашей странице.

//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)
    });
}
Источник
Другие вопросы по тегам