Использование jquery ajax в Rails не работает должным образом.

Question

В настоящее время я изучаю рельсы, тогда я подхожу к использованию jquery для отправки ajax для формы, я знаю об ujs, но я не хочу ее использовать. Я хочу использовать чистый javascript или jquery для обучения (понимая это). Итак, у меня есть эта проблема, что когда я нажимаю отправить на кнопку она стала отключить а также, когда я использую этот способ

$(function() { 
    var form = $('#new_post'); 
    var formData = $(form).serialize(); 

    $(form).submit(function(event) { 
    $.ajax({ 
     type: 'POST', 
     url: $(this).attr('action'), 
     dataType: 'json', 
     data: formData 
    }).done(function (response) { 
     console.log(response); 
    }) 

    event.preventDefault(); 
    }) 
}); 

сериализация formData пуста, но когда я попробовал этот способ

$(function() { 
    var form = $('#new_post');  
    $(form).submit(function(event) { 
    $.ajax({ 
     type: 'POST', 
     url: $(this).attr('action'), 
     dataType: 'json', 
     data: $(form).serialize() 
    }).done(function (response) { 
     console.log(response); 
    }) 

    event.preventDefault(); 
    }) 
}); 

который я вызываю непосредственно $(form).serialize() внутри ajax. Я не понимаю, в чем разница, но я уже пытался провести некоторое исследование, и я не могу найти ответ.

Кстати, это рельсы.

<%= form_for(post) do |f| %> 
    <div class="field"> 
    <%= f.label :title %> 
    <%= f.text_field :title %> 
    </div> 

    <div class="field"> 
    <%= f.label :content %> 
    <%= f.text_area :content %> 
    </div> 

    <div class="actions"> 
    <%= f.submit %> 
    </div> 
<% end %> 

Answer 1

Изменить код так:

$(function() { 
    var form = $('#new_post'); 
    // Directly use the variable created above 
    form.submit(function(event) { 
    event.preventDefault(); 
    $.ajax({ 
     type: 'POST', 
     url: form.attr('action'), 
     dataType: 'json', 
     data: form.serialize() 
    }).done(function (response) { 
     console.log(response); 
    }) 
    }) 
}); 

Код ниже не будет работать:

$(function() { 
    var form = $('#new_post'); 
    //formData is empty when the page loads and the same value is getting assigned inside the ajax call which is wrong. 
    //Therefore the best way is to directly get the data while submitting the form. 
    var formData = form.serialize(); 

    form.submit(function(event) { 
    event.preventDefault(); 
    $.ajax({ 
     type: 'POST', 
     url: form.attr('action'), 
     dataType: 'json', 
     //Here formData is empty 
     data: formData 
    }).done(function (response) { 
     console.log(response); 
    }) 
    }) 
}); 

Answer 2

я уже знаю почему. лол

$(function() { 
    var form = $('#new_post'); 

    form.submit(function(event) { 
    var formData = form.serialize(); 
    event.preventDefault(); 
    $.ajax({ 
     type: 'POST', 
     url: form.attr('action'), 
     dataType: 'json', 
     data: formData 
    }).done(function (response) { 
     console.log(response); 
    }) 

    }) 
}); 

var formData = form.serialize(); должен быть внутри представить события, так что есть данные, введенные пользователем.