AJAX trong Ruby on Rails

Rails cung cấp một loạt các phương thức trợ giúp giao diện được viết bằng Ruby để hỗ trợ bạn tạo ra một trang HTML. Đôi khi, bạn muốn thêm một vài phương thức Ajax nhỏ vào các phần tử của trang HTML, và Rails sẽ hỗ trợ bạn trong những trường hợp đó.

Các phương thức "Ajax helper" trên Rails thực tế gồm hai phần: một nửa JavaScript và một nửa Ruby.

1.1. form_for

form_for là phương thức giúp bạn viết form. form_for có một tùy chọn :remote. Nó hoạt động như thế này:

<%= form_for(@article, remote: true) do |f| %>
  ...
<% end %>

Nó sẽ tạo HTML dưới dạng:

<form accept-charset="UTF-8" action="/articles" class="new_article" data-remote="true" id="new_article" method="post">
  ...
</form>

Chú ý data-remote="true". Bây giờ, biểu mẫu sẽ được gửi bởi Ajax chứ không phải bởi cơ chế gửi bình thường của trình duyệt.

1.2. form_tag

form_tag cũng như form_for. Nó cũng có tùy chọn :remote và được dùng như sau:

<%= form_tag('/articles', remote: true) do %>
  ...
<% end %>

Dưới dạng HTML:

<form accept-charset="UTF-8" action="/articles" data-remote="true" method="post">
  ...
</form>

1.3. link_to

link_to là phương thức giúp sinh ra đường dẫn. Nó cũng có tùy chọn:remote để sử dụng Ajax như sau:

<%= link_to "an article", @article, remote: true %>

Bạn có thể bắt các sự kiện Ajax. Đây là một ví dụ. Giả sử rằng chúng ta có một danh sách các bài viết có thể bị xóa với chỉ một cú nhấp chuột. Chúng ta sẽ tạo ra một số HTML như thế này:

<%= link_to "Delete article", @article, remote: true, method: :delete %>

và viết CoffeeScript như sau:

$ ->
  $("a[data-remote]").on "ajax:success", (e, data, status, xhr) ->
    alert "The article was deleted."

Điều này sau khi xóa thành công, sẽ hiển thị thông báo: "The article was deleted."

1.4. button_to

button_to là phương thức giúp tạo ra button. Việc sử dụng tùy chọn:remote với button_to như sau:

<%= button_to "An article", @article, remote: true %>

nó sẽ sinh ra:

<form action="/articles/1" class="button_to" data-remote="true" method="post">
  <input type="submit" value="An article" />
</form>

Bởi vì đây là một <form> nên mọi dữ liệu trong form sẽ được gửi đi.

Ngoài việc sử sụng Ajax hỗ trợ bởi Rails, chúng ta có thể sử dụng trực tiếp jQuery Ajax. Cấu trúc cơ bản:

$.ajax({
    url: "/",
    type: "POST",
    data: {},
    dataType: "script"
});

Trong đó:

• url: là địa chỉ controller gửi đến
• type: phương thức gửi
• dataType: kiểu dữ liệu
• data: param sẽ gửi đi