Rails 中的 Jquery 异步表单提交

Question

我正在尝试使用异步提交表单来上传图片，这是我的 Rails HTML：

<%= form_for(:image, :url => {:controller=> 'questions',:action => 'upload_Qimage'}, :html => {:id=>'qimage_upload'}) do |f| %>
<%= f.file_field :image, :onchange => " return uploadImage() ; "  %>
<%= f.hidden_field :id , :value => Digest::MD5.hexdigest((current_user.id + Time.now.to_i).to_s )[0,7] %>
<% end %>

这是我的js函数uploadImage()：

function uploadImage ()
    {
       $('#qimage_upload').submit() ; 
    $('#qimage_upload').submit( function() {  
                    return false ;   
       }

忽略提交函数中的ajax代码，即使注释掉我也无法获得第二个警报。我现在整天都在做这件事，不知道有什么问题。

更新：请注意上面代码中的更新，使用没有回调的简单 submit() 可以工作，但它不符合我的目的，因为它尝试为操作呈现视图。这是 jQuery 版本的问题吗？

第二次更新

这就是我的控制器动作的样子：

def upload_Qimage

       @image = Image.new(params[:image])
       @image.save

   end

无论我尝试使用 jQuery 和 html 做什么，它仍然会尝试渲染视图。该文件与当前更新的 js 一起保存，但是当我不希望它执行任何操作或者只是返回一些数据（不是部分渲染，只是数据）时，它仍然会尝试渲染视图

Answer 1

无论 AJAX 发生了什么，您都想触发警报？

http://api.jquery.com/jQuery.ajax/#jqXHR

jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { });

这将在任何情况下触发，无论是成功还是 AJAX 调用失败。

您还缺少捕获事件并阻止它进一步执行。看一下events（这对 vanilla JavaSCript 也有效）。

$('#qimage_upload').submit() ; //This triggers and submitts the form  
$('#qimage_upload').submit( function() {  //therefore, you will never reach this when the new page has been loaded
    ... }

因此，阻止事件发生

$('#qimage_upload').submit(function(event){
event.preventDefault();

....

return false;
});

我知道return false 就足够了，但这是处理它的正确方法。

Answer 2

了解.submit() 和.submit(handler) 之间的区别：第一种方法提交表单，而第二种方法只是将事件处理程序绑定到事件。因此不会出现警报，因为您绑定了事件处理程序但实际上并未提交表单。尝试在 绑定处理程序后运行 $('#qimage_upload').submit()：

$('#qimage_upload').submit(function() {  
    alert(1);
    $.ajax({
        // blah-blah-blah
    });
    return false; 
}); 
$('#qimage_upload').submit();