Javascript 当包含带有回形针的附件时，ajax post请求将使用html元素进行响应

我有一个应用程序，允许用户通过ajax提交故事，然后允许读者通过同样通过ajax提交的帖子对故事进行评论。我使用的是Rails 3.0.3、ruby 1.9.2p290和jQuery1.6.22。我还允许用户使用rails回形针2.3 gem在帖子中添加照片

当用户的帖子中没有包含照片时，一切都会完美运行。我从服务器得到一个200的响应代码，服务器用有效的json进行响应，我可以毫无问题地解析它。我的问题发生在用户包含照片时

当用户包含一张照片时，我仍然得到一个200的服务器响应代码，但由于某种原因，服务器的实际响应是HTML而不是json（触发解析器错误）。json响应应该包含在HTML元素中。我可以修改html以获得所需的数据，但我更愿意让服务器返回有效的json，而不是html中的json

以下是相关代码：

application.js：

jQuery.ajaxSetup({ 
  beforeSend: function(xhr) {
    xhr.setRequestHeader("Accept", "text/javascript")
  }
});

////show "please wait" icon when submitting a form via ajax or remotipart
$(document).delegate("form", "ajax:beforeSend ajax:remotipartSubmit", function(e, data, status, xhr){
  $("div.loading_new").attr('style', 'z-index: 9999');
});

//remove the "please wait" icon when the ajax request completes
$(document).delegate("form.new_post", "ajax:complete", function(e, data, status, xhr){
    $("div.loading_new_post").attr('style', '');
});

//immediately add a new post on successful ajax post request    
$(document).delegate("form.new_post", "ajax:success", function(e, data, status, xhr){
    pollingForNewPosts();  //immediately poll for new posts even if the polling timer hasn't tolled yet
    $("#bucket_for_new_post_form_story_"+data.post.story_id).slideUp(); 
    $("#bucket_for_new_post_form_story_"+data.post.story_id).empty();
});

注意，当我提交一个没有照片的post请求时，成功和完整的回调都会触发。当我提交带有照片的帖子时，只有完整的回调才会触发

posts_controller.rb：

 def create
    @story = Story.find(params[:story_id])
    @post = @story.posts.build(params[:post])
    @post.user_id = current_user.id
    if @post.save 
      logger.debug "!!!!! #{@post.to_json}"
      render :json => @post
    end
 end

下面是不带附件的post的控制台输出，后面是带附件的post。如您所见，两个输出都反映了没有任何html包装的有效json：

以下是post表单HTML的示例：

<form id="new_post_for_story_55" class="new_post" novalidate="novalidate" method="post" enctype="multipart/form-data" data-remote="true" action="/stories/55/posts" accept_charset="UTF-8" target="">
  <div class="field">
    <label> Add to the story: </label>
    <br>
    <textarea id="new_post_contents_for_story_55" class="new_post_contents valid" name="post[contents]"></textarea>
    <div class="loading_new loading_new_post" style="">
      <img src="images/ajax-loader.gif">
    </div>
  </div>
  <div class="field">
    If you want to add a photo to your post, browse for it here:
     <input id="new_post_photo" class="valid" type="file" name="post[photo]">
  </div>
  <div class="actions">
    <input id="post_submit_story_55" class="submit_post button ui-button ui-widget ui-state-default ui-corner-all" type="submit" aria-disabled="false" role="button" value="Submit" name="commit">
    <input id="cancel_post_button_55" class="cancel_post button ui-button ui-widget ui-state-default ui-corner-all" type="button" aria-disabled="false" role="button" value="Cancel" name="cancel">
  </div>
</form>

添加到故事中：


如果要在帖子中添加照片，请在此处浏览：

下面是我的post.rb文件的相关部分：

class Post < ActiveRecord::Base

  attr_accessor 
  attr_accessible :contents, :photo, :latitude, :longitude

  belongs_to    :story, :touch => true
  belongs_to    :user, :touch => true

  has_attached_file :photo, 
                    :styles => { :medium => "400x400>", :thumb => "100x100>" },
                    :storage => :s3,
                    :s3_credentials => "#{Rails.root.to_s}/config/s3.yml",
                    :path => "/:style/:id/:filename"

  validates   :contents,  :presence   => true,
                  :length     => {  :maximum => 299,
                                :minimum => 5 } 
  validates   :user_id,   :presence => true
  validates_attachment_content_type :photo, :content_type=>['image/jpeg', 'image/png', 'image/gif']

class Posttrue
属于：user，：touch=>true
已附上文件：照片，
：style=>{:medium=>“400x400>”，：thumb=>“100x100>”，
：storage=>：s3，
：s3_credentials=>“#{Rails.root.to_s}/config/s3.yml”，
：path=>“/：style/：id/：filename”
验证：contents，：presence=>true，
：长度=>{：最大=>299，
：最小值=>5}
验证：user_id，：presence=>true
验证附件内容类型：照片，内容类型=>['image/jpeg'，'image/png'，'image/gif']

最后，以下是我从firebug得到的回复，其中一篇文章没有包含附件，然后是一篇非常类似的文章，其中包含附件：

如您所见，第二篇文章是通过回形针附上照片的文章，回复为html。第一篇文章没有附件，它的响应是json

---

如果你能帮我弄清楚如何用json回复包含回形针附件的帖子，我将不胜感激。我觉得我一定错过了一些非常愚蠢的东西，但尽管我可能会尝试，我还是无法找出我的错误。

结果表明，remotipart使用了一个隐藏的iframe来传输您的图像。作为编辑操作接收html请求的结果，服务器将返回html响应。Remotipart足够智能，可以用html包装所需的json响应，并且可以使用$.parseJSON（data.responseText）获取json。但是您的浏览器需要纯json响应，它将抛出解析器错误

---

我相信您可以忽略此错误。

您正在记录@post.to_json，但正在呈现@post。您是否尝试过将@post.to_json呈现或记录@post？是否碰巧有一个

app/views/posts/show.json.erb

文件？感谢您的关注。是的。我已经尝试将

@post

和

@post.to_json

呈现到json。两者产生的结果与我展示的结果完全相同。另外，我没有app/views/posts/show.json.erb文件