There is a form that should be sent without rebooting, for this I use this jquery code:

$(document).ready(function(){ $.ajaxSetup({ headers: {"X-CSRF-Token": "{{csrfToken}}" } }); $('#edit-profile_form').submit(function(e) { e.preventDefault(); var data = $("form").serialize(); console.log(data); $.ajax({ contentType:"text/plain; charset:UTF-8", global: false, async: true, type: 'POST', url: '/user/changeProfileData', dataType: 'text', data: data, success: function (result) { console.log(result); }, error: function (request, status, error) { console.log(error); } }); console.log("Send to server!"); }); });

When preventDefault is in the code, {} is an empty object on the server. And if it is not there, then the page reloads (which is bad), but all the necessary data comes to the server (which is good). How to deal with it? Here is the form itself:

 <form action="/user/changeProfileData" id="edit-profile_form" method="post"> <ul class='profile-data'> <li class='profile-data_item persona-icon'>НикнСйм: <input id='profile_nickname' name='nickname' type="text" placeholder="НикнСйм:" value="{{myNickname}}" ></li> <li class='profile-data_item'>Имя: <input name='name' id='profile_name' type="text" placeholder="Имя:" value="{{myName}}" ></li> <li class='profile-data_item'>Ѐамилия: <input name='surname' id='profile_surname' type="text" placeholder="Ѐамилия:" value="{{mySurname}}" ></li> <li class='profile-data_item b-day-icon'>Возраст: <input name='age' id='profile_age' type="text" placeholder="Возраст:" value="{{myAge}}" ></li> <li class='profile-data_item place-icon'><input type="text" name='city' id='profile_city' placeholder="Π“ΠΎΡ€ΠΎΠ΄" value="{{myCity}}" >, <input name='country' id='profile_country' type="text" placeholder="Π‘Ρ‚Ρ€Π°Π½Π°" value="{{myCountry}}" ></li> <li class='profile-data_item phone-icon'>Π’Π΅Π»Π΅Ρ„ΠΎΠ½: <input name='phoneNumber' id='profile_phoneNumber' type="text" placeholder="Π’Π΅Π»Π΅Ρ„ΠΎΠ½:" value="{{myPhoneNumber}}" ></li> <input type="hidden" name="_csrf" value='{{csrfToken}}' /> <input type="submit" value="Submit" id="edit-profile_submit"> </ul> </form>

  • This question is different from the previous one ? - Grundy
  • @Grundy in the previous preventDefault did not work at all, but now it works, but because of it the form is not sent ... - Bim Bam
  • and what generally goes to the server? what does $("form").serialize() return $("form").serialize() ? - Grundy

2 answers 2

All jquery code replaced by

 $('#edit-profile_form'). on('submit', function(evt){ evt. preventDefault(); var action = $(this).attr('action' ); var $container = $(this).closest('.formContainer' ); $. ajax({ url: action, type: 'POST' , data: $(this). serialize(), success: function(data){ if(data.success){ $container.html('<h2>Бпасибо!</h2>' ); } else { $container.html('Π’ΠΎΠ·Π½ΠΈΠΊΠ»Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°.' ); } }, error: function(){ $container.html('Π’ΠΎΠ·Π½ΠΈΠΊΠ»Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°.' ); } }); });

... and it worked.

    I would venture to suggest: due to the fact that in the first case the data type dataType: 'text' was specified, the server could not correctly decode the data.