Форма без preventDefault отправляется, а с preventDefault не отправляется. Что делать?

298

20 апреля 2017, 16:54

Есть форма, которая должна отправляться без перезагрузки, для этого я использую такой jquery код:

$(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!");
    });
});

Когда preventDefault есть в коде, то на сервер приходит {} пустой обьект. А если его нет, то страница перезагружается (что плохо), но на сервер приходят все нужные данные (что хорошо). Как с этим бороться? Вот сама форма:

<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>

Answer 1

Весь jquery код заменил на

$('#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('Возникла проблема.' );
            }
        });
    });

...и всё сработало.