Ruby On Rails：并行运行 AJAX 和提交请求答案

【问题标题】：Ruby On Rails : AJAX and Submit Request Running ParallelyRuby On Rails：并行运行 AJAX 和提交请求
【发布时间】：2017-10-18 19:55:13
【问题描述】：

这是我的代码：

<%= simple_form_for @video do |form| %>
    <div class="form-inputs"> 
    <%= form.input :title, id: :video_title %>
    <div class="row">
       <div class="input-field col s12">
          <textarea id="textarea1" name="video[description]" class="materialize-textarea"></textarea>
       <label for="textarea1">Description</label>
    </div>
    </div>
    <label for="spaceTags">Tags</label>
    <div id="spaceTags" class="chips chips-placeholder"></div>
    <%= form.label :movie %>
    <%= form.file_field :movie %>
    <%= form.label :preview_images%>
    <%= form.file_field :preview_images, multiple: true %>
  <p>
  <input type="checkbox" name=video[published] id="test5" />
  <label for="test5">Publish Video</label>
</p>
 <div class="form-actions" onclick="fetch();">
    <%= form.submit%>
 </div>
<% end %>

我的 javascript 代码是：

$('#textarea1').trigger('autoresize');
$('.chips').material_chip();
$('.chips-placeholder').material_chip({
   placeholder: 'Enter a tag',
   secondaryPlaceholder: '+Tag',
});
function fetch(){
 var x = $('#spaceTags').material_chip('data');
 $.ajax({
    type: "POST",
    url : "/videos",
    data: {"sarthak":JSON.stringify(x)},
    success : function(){alert ("Success!")},
    error : function(data){alert(data.message)}
  });
  }

当我尝试提交表单时，它在这两种情况下都会调用相同的操作。有什么方法可以延迟表单提交直到 AJAX 调用被执行，或者我可以通过任何其他方式解决这个问题问题。

【问题讨论】：

不好命名你的函数fetch...它已经存在于全局范围内...你要么覆盖它，要么阻止在一个范围内使用它。应该一起命名：getVideos 如果你只看代码，调用 fetch 函数可以获取任何东西

标签： javascript jquery ruby-on-rails ajax

【解决方案1】：

您可以使用event.preventDefault，它会停止表单的正常执行并触发您的fetch 方法。

您可以将fetch 方法更改为：

function fetch(event){
  event.preventDefault();
  // the rest of your code
}

然后，在你的 ajax success 承诺中，你可以处理任何你想要的，甚至可以再次提交表单

$.ajax({
    type: "POST",
    url : "/videos",
    data: {"sarthak":JSON.stringify(x)},
    success : function(){
        alert ("Success!"); 
        $('form').submit() 
    },
    error : function(data){alert(data.message)}
  });

【讨论】：