Question

解

$('#chatbox_' + conversation_id).html($(data).find('div.chatboxhead'));
$('#chatbox_' + conversation_id).append($(data).find('div.chatboxcontent'));
$('#chatbox_' + conversation_id).append($(data).find('div.chatboxinput'));

我正在使用AJAX调用从控制器检索数据，然后将其插入到特定的div中。我正在使用Rails 5构建。

由于某种原因，AJAX调用会在所需插入的HTML标记旁边返回整个HTML DOM（以字符串形式）的副本。

以下错误似乎指向了该问题：Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

我的AJAX调用看起来像这样......

$.get("chatrooms/" + conversation_id,  function (data) {
    console.log(data);
    $('#chatbox_' + conversation_id).html(data);
    $("#chatbox_" + conversation_id + " .chatboxcontent").scrollTop($("#chatbox_" + conversation_id + " .chatboxcontent")[0].scrollHeight);
}, "html");

从上面的console.log()我可以看到带有所需插入的整个HTML DOM ......

<!DOCTYPE html>
<html>
  <head>
    <title>Attr</title>
    <meta name="csrf-param" content="authenticity_token" />
    <meta name="csrf-token" content="MLx0eod42jFrFPfeZjLcQvgJgGzSv+mChtVczKSTtu+6U1hLCTCzyWnpGLOVYbEvhsEmdw0VWXdppRpc32juxQ==" />
     ...you get the point

console.log(conversation_id);输出正确的ID 3

以下是我的控制台日志的完整输出...我认为这里有些奇怪，它会重新呈现Rendering chatrooms/show.html.erb within layouts/application和Rendered chatrooms/show.html.erb within layouts/application以及Rendered layouts/_nav.html.erb

   Started POST "/chatrooms" for ::1 at 2016-07-23 14:48:56 -0400
Processing by ChatroomsController#create as */*
  Parameters: {"sender_id"=>"1", "recipient_id"=>"2"}
  Chatroom Load (0.3ms)  SELECT "chatrooms".* FROM "chatrooms" WHERE "chatrooms"."sender_id" = $1 AND "chatrooms"."recipient_id" = $2  [["sender_id", "1"], ["recipient_id", "2"]]
  Chatroom Load (0.4ms)  SELECT  "chatrooms".* FROM "chatrooms" WHERE "chatrooms"."sender_id" = $1 AND "chatrooms"."recipient_id" = $2 ORDER BY "chatrooms"."id" ASC LIMIT $3  [["sender_id", "1"], ["recipient_id", "2"], ["LIMIT", 1]]
Completed 200 OK in 4ms (Views: 0.3ms | ActiveRecord: 0.7ms)


Started GET "/chatrooms/3" for ::1 at 2016-07-23 14:48:56 -0400
Processing by ChatroomsController#show as HTML
  Parameters: {"id"=>"3"}
  Chatroom Load (0.4ms)  SELECT  "chatrooms".* FROM "chatrooms" WHERE "chatrooms"."id" = $1 LIMIT $2  [["id", 3], ["LIMIT", 1]]
  CACHE (0.0ms)  SELECT  "chatrooms".* FROM "chatrooms" WHERE "chatrooms"."id" = $1 LIMIT $2  [["id", 3], ["LIMIT", 1]]
  User Load (0.4ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 2], ["LIMIT", 1]]
  Rendering chatrooms/show.html.erb within layouts/application
   (0.3ms)  SELECT COUNT(*) FROM "messages" WHERE "messages"."chatroom_id" = $1  [["chatroom_id", 3]]
  Rendered chatrooms/show.html.erb within layouts/application (2.6ms)
  User Load (0.5ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 1], ["LIMIT", 1]]
  Rendered layouts/_nav.html.erb (3.2ms)
Completed 200 OK in 116ms (Views: 98.4ms | ActiveRecord: 1.6ms)

GET AJAX请求调用以下操作......

def show
  @conversation = Chatroom.find(params[:id])
  @reciever = User.where(:id => @conversation.recipient_id).first
  @messages = Message.where(:chatroom_id => params[:id])
  @message = Message.new
  # debugger
end

JQuery Rails从HTML字符串中提取div并插入到DOM中

0 个答案: