0

Есть форма, которая должна отправляться без перезагрузки, для этого я использую такой 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>

3
  • данный вопрос отличается от предыдущего?
    – Grundy
    Commented 19 апр. 2017 в 17:00
  • @Grundy в предыдущем preventDefault вообще не срабатывал, а сейчас срабатывает, но из-за него форма не отправляется...
    – Bim Bam
    Commented 19 апр. 2017 в 17:02
  • а что вообще отправляется на сервер? что возвращает $("form").serialize()?
    – Grundy
    Commented 19 апр. 2017 в 17:08

2 ответа 2

0

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

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

0
0

Рискну предположить: из-за того что в первом случае был указан тип данных dataType:'text', сервер не мог правильно декодировать данные.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.