Computer >> Máy Tính >  >> Lập trình >> Ruby

Cách sử dụng AJAX với Ruby on Rails

Hãy hiểu tại sao AJAX tồn tại, vì vậy bạn có thể hiểu rõ hơn về cách sử dụng nó trong các dự án Rails của mình.

Khi bạn truy cập một trang web, điều gì sẽ xảy ra?

Một trang được tải từ máy chủ. Nhưng nếu bạn muốn xem thông tin mới, bạn phải tải lại trang để cập nhật hoặc nhấp vào liên kết để truy cập một trang khác.

Đây là quy trình đồng bộ .

Dữ liệu mới chỉ được hiển thị khi một trang mới được yêu cầu từ máy chủ.

Nhưng…

Nếu bạn không muốn tải lại trang này thì sao?

Điều gì xảy ra nếu bạn muốn tìm nạp dữ liệu từ chương trình phụ trợ , bất kỳ lúc nào bạn muốn, để bạn có thể cập nhật bất kỳ phần nào của trang hiện tại?

Đây là nơi AJAX xuất hiện.

AJAX là viết tắt của Javascript &XML không đồng bộ .

Đó là một kỹ thuật độc lập với khuôn khổ web của bạn, nhưng Rails đặc biệt có hỗ trợ tốt cho nó như bạn sẽ tìm hiểu trong bài viết này.

Hãy nhớ rằng việc thêm AJAX vào ứng dụng của bạn sẽ khiến ứng dụng trở nên phức tạp hơn.

Yêu cầu AJAX Trực tiếp

AJAX có hai phần, yêu cầu mà bạn thực hiện từ trình duyệt bằng Javascript và phản hồi mà bạn xử lý từ ứng dụng Ruby của mình.

Bạn có thể thực hiện yêu cầu AJAX bằng Javascript thuần túy.

Nhưng vì điều đó đòi hỏi nhiều mã soạn sẵn nên chúng tôi thường thực hiện việc này thông qua thư viện Javascript như jQuery.

Đây là yêu cầu jQuery trông như thế nào :

$.get( "/vegetables", function(data) {
  alert("Vegetables are good for you!");
});

Tuy nhiên, vì Rails 5.1 jQuery không có sẵn theo mặc định (nhưng bạn có thể thêm lại).

Lưu ý :Bạn sẽ nhận được một InvalidAuthenticityToken lỗi khi bạn thực hiện yêu cầu jQuery POST, điều này có nghĩa là bạn cần gửi csrf-token từ trang hiện tại như một biện pháp bảo mật. Sử dụng Rails.ajax tự động làm điều này cho bạn.

Có một giải pháp!

Rails bao gồm chức năng AJAX của riêng nó :

Rails.ajax({
  url: "/books",
  type: "get",
  data: "",
  success: function(data) {},
  error: function(data) {}
})

Hãy nhớ rằng, đây vẫn là từ phía yêu cầu của mọi thứ, từ trình duyệt.

Có nghĩa là đây là mã Javascript .

Trong Rails, chức năng AJAX này được cung cấp bởi một thứ gọi là “JavaScript không phô trương”, hay viết tắt là “UJS”.

Cập nhật một phần bằng AJAX

Nếu bạn chỉ muốn cập nhật một phần trang của mình với dữ liệu bạn nhận được từ AJAX, bạn có hai tùy chọn.

  1. Bạn có thể viết chế độ xem Javascript + ERB, chế độ xem này cập nhật phần tử
  2. Bạn có thể trả lại phản hồi JSON từ bộ điều khiển của mình với HTML mới dưới dạng chuỗi, sau đó sử dụng Javascript để cập nhật phần tử

Ngoài ra còn có tùy chọn thứ 3.

Nó liên quan đến việc trả lại chỉ dữ liệu dưới dạng JSON , sau đó tạo các phần tử HTML bằng Javascript bằng cách sử dụng dữ liệu đó.

Đây là nơi các khuôn khổ JS như React ra đời.

Theo ý kiến ​​của tôi, chúng thêm nhiều sự phức tạp không cần thiết .

Nhưng chúng ta có thể xử lý điều này bằng Javascript đơn giản!

Đó là tùy chọn 1 &2.

Hãy gắn bó với những điều đó ngay bây giờ 🙂

Ví dụ về chế độ xem Javascript :

Rails.$('.random-number')[0].innerHTML = ("<%= j (render partial: 'random') %>")

j là bí danh cho escape_javascript

ví dụ về jQuery :

$('.random-number').html("<%= j (render partial: 'random') %>")

Cả html &innerHTML thay thế nội dung của phần tử đích.

Bạn cũng có thể nối (jQuery) một phần tử mới vào một danh sách thay vì thay thế toàn bộ.

Đặt mã này vào tệp có phần mở rộng là .js.erb , với tên của hành động hiện tại (như create.js.erb ) &bên trong thư mục chế độ xem.

Trên bộ điều khiển, bạn có thể hiển thị chế độ xem này giống như bất kỳ chế độ xem nào khác.

Bây giờ :

Khi bạn thực hiện cuộc gọi AJAX, mã Javascript này sẽ tự động chạy và cập nhật HTML.

Hãy xem tùy chọn thứ 2.

Đây là mã bộ điều khiển :

render json: { html: render_to_string(partial: 'random') }

Sau đó từ mã Javascript của bạn :

Rails.ajax({
  url: "/books",
  type: "get",
  success: function(data) { Rails.$(".random-number")[0].innerHTML = data.html; }
})

Đó là một cách khác để làm điều này!

Bạn nên sử dụng gì?

DHH yêu thích nhất là cách đầu tiên mà anh ấy gọi là “SJR” (Javascript do máy chủ tạo).

Tôi đoán đây là cách Rails muốn bạn làm điều này, nhưng hãy thử cả hai (SJR &render_to_string ) bản thân và xem cái nào phù hợp nhất với bạn.

Cách sử dụng HAML cho các chế độ xem JS của bạn

Được rồi.

Giả sử bạn là người dùng HAML.

Có thể sử dụng SJR này không kỹ thuật &kết xuất .js.haml lượt xem?

Vâng!

Đây là một ví dụ :

- content = j (render partial: "random")

Rails.$('.random-number')[0].innerHTML = ("#{content}")

Nó xấu hơn một chút so với phiên bản ERB, nhưng nó hoạt động.

Cách gửi biểu mẫu đường ray mà không cần làm mới trang

Nếu bạn muốn gửi biểu mẫu bằng AJAX, bạn có thể thực hiện việc này mà không cần phải viết yêu cầu AJAX.

Rails có thể xử lý nó cho bạn.

Làm thế nào?

Sử dụng remote: true tùy chọn với form_for .

Đây là một ví dụ :

<%= form_for @fruit, remote: true do |f| %>
  <%= f.label :name, 'Fruit' %>
  <%= f.text_field :name %>

  <%= f.submit 'Create' %>
<% end %>

Bây giờ khi bạn nhấp vào “Tạo”, Rails sẽ gửi yêu cầu AJAX cho bạn và trang sẽ không tải lại.

Nếu bạn muốn hiển thị lỗi xác thực bạn sẽ phải tạo và hiển thị chế độ xem Javascript (.js.erb tệp) thay thế các lỗi hiện tại bằng các lỗi mới.

Giống như ví dụ trong “Cập nhật một phần bằng AJAX”.

Btw, remote này tùy chọn cũng có thể được sử dụng với các liên kết, vì vậy bạn có thể thực hiện xóa delete yêu cầu.

Ví dụ :

<%= link_to "Delete", book_path(book), { method: "delete", remote: true, data: { confirm: "Are you sure?" } }

Bạn có thể xử lý phản hồi bằng chế độ xem Javascript.

Nếu bạn muốn xử lý cả yêu cầu HTML (đến từ tải lại trang) và yêu cầu AJAX, bạn sẽ phải sử dụng một cái gì đó như respond_to phương pháp.

Ví dụ :

respond_to do |f|
  f.html { redirect_to :index }
  f.js
end

Trong ví dụ này, có thể dễ dàng hơn để cho các Turbolinks xử lý việc này.

Bạn vẫn có thể thực hiện các yêu cầu AJAX &redirect_to từ bộ điều khiển (không có respond_to ), sau đó Turbolinks sẽ thay thế nội dung của trang mà không cần tải lại.

AJAX không hoạt động? Đây là một số mẹo

Nếu yêu cầu AJAX của bạn không hoạt động thì bạn phải gỡ lỗi.

Trước tiên, hãy mở các công cụ dành cho nhà phát triển trình duyệt của bạn.

Bạn muốn xem bảng điều khiển để tìm bất kỳ lỗi Javascript nào .

Khắc phục những điều đó.

Ngoài ra, hãy đảm bảo rằng bất kỳ bộ chọn CSS nào bạn đang nhắm mục tiêu đều phù hợp và bạn không mắc lỗi chính tả nào.

Sau đó, kiểm tra nhật ký đường ray của bạn đối với bất kỳ lỗi nào.

Sau đó, đảm bảo rằng chế độ xem chính xác đang được hiển thị.

Nếu bạn làm theo quy trình này, bạn sẽ có thể tìm ra lý do tại sao yêu cầu AJAX của bạn không hoạt động và khắc phục nó.

Tóm tắt

Bạn đã học về AJAX, một kỹ thuật phát triển web cho phép bạn thực hiện Yêu cầu không đồng bộ!

Bạn cũng đã học cách thực hiện điều này trong Rails. Hãy nhớ rằng AJAX không bắt buộc phải làm cho ứng dụng Rails thông thường (không phải JS framework) của bạn hoạt động , nhưng đó là thứ hữu ích khi có trong hộp công cụ của bạn.

Đừng quên chia sẻ bài viết này để nhiều người có thể hưởng lợi từ nó 🙂

Cảm ơn vì đã đọc!