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
    19 апр 2017 в 17:00
  • @Grundy в предыдущем preventDefault вообще не срабатывал, а сейчас срабатывает, но из-за него форма не отправляется...
    – Bim Bam
    19 апр 2017 в 17:02
  • а что вообще отправляется на сервер? что возвращает $("form").serialize()?
    – Grundy
    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', сервер не мог правильно декодировать данные.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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