Question

目前，我正在学习rails然后我提出要使用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();
  } )
} );

我直接调用ajax中的$( form ).serialize()。我不明白有什么区别，但我已经尝试做了一些研究，但我找不到答案。

顺便说一句，这就是轨道形式。

<%= 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();应该在提交事件中，以便它具有用户输入的数据。

在Rails中使用jquery ajax无法正常工作。

2 个答案: