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

Question

У меня есть следующая страница jsp, в которой есть таблица, заполненная данными из arraylist в 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> 

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> 

Вы можете получить PHONENO и электронную почту с помощью request.getParameter ("PHONENO") и request.getParameter ("электронная почта").

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

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-библиотека, которая упрощает создание сценариев во многих отношениях, включая создание айакс-вызовов. Jquery ajax call

Тогда ваш вызов ajax должен иметь функции, определенные для обновления вашей страницы в зависимости от ответа сервера (в зависимости от того, был ли ваш вызов успешным или неудачным). Вот пример кода для сериализации HTML-формы для объекта, затем «подстроить» его на json, запустить ajax-вызов для rest 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) 
    }); 
}