在Rails應用程序中與JavaScript文件中的數據庫進行通信

Question

聲明：我是一名rails新手，所以我很抱歉如果我在這個問題上完全錯誤。我使用jQuery UI的可拖動功能，並且在用戶拖拽一個元素後，我需要向數據庫中添加一個新條目。我的JavaScript看起來像這樣：

$(function() { 
    $(".staged").draggable({ appendTo: 'body', 
     containment: 'window', 
     scroll: false, 
     helper: 'clone', 
     stop: function(e,ui) { 
      // around here, I'd like to create a new entry in the database called "placed_images" 
      var url = this.getAttribute("src"); 
      x = ui.offset.left; 
      y = ui.offset.top; 
      var div = document.createElement("div"); 
      div.className += "placed"; 
      div.innerHTML = '<img src="'+url+'" class="placed" style="top:'+y+'px;left:'+x+'px;">' 
      document.getElementById('page').appendChild(div); 
      $(function() { 
       $(".placed").draggable(); 
      }); 
     } 
    }); 
}); 

上面的代碼是在我的應用程序的JavaScript文件夾中的pages.js文件。我知道如何通過使用表單動作向控制器中的「創建」函數發送參數來在數據庫中創建新條目。該代碼應該具有相同的效果：

form_for(:placed_image, :url => {:action => 'create'}) do |f| ... 

除非沒有窗體，它應該異步發生，沒有頁面重新加載。就像我說的那樣，這可能是一個頭腦發展的方式，我不確定。但如果你知道一個圖書館，寶石或教程可能會幫助我，那就是greaaaat。

Answer 1

由於您使用的是jQuery，因此您應該利用jQuery的內置AJAX方法與JavaScript通信與Rails服務器。

jQuery有一個$.ajax方法：http://api.jquery.com/jQuery.ajax/

例子：

$(function() { 
    $(".staged").draggable({ appendTo: 'body', 
     containment: 'window', 
     scroll: false, 
     helper: 'clone', 
     stop: function(e,ui) { 
      // generate 'placed_images' on server 
      $.ajax({ 
       data: { 'some_data_to_send_to_server':'any_data_goes_here' }, 
       type: 'POST', 
       url: '/some_path_to_your_controller', 
       success: function() { 
        // it worked! 
       }, 
       error: function (response) { 
        // we had an error 
       } 
      }); 

      var url = this.getAttribute("src"); 
      x = ui.offset.left; 
      y = ui.offset.top; 
      var div = document.createElement("div"); 
      div.className += "placed"; 
      div.innerHTML = '<img src="'+url+'" class="placed" style="top:'+y+'px;left:'+x+'px;">' 
      document.getElementById('page').appendChild(div); 
      $(function() { 
       $(".placed").draggable(); 
      }); 
     } 
    }); 
});