Làm thế nào để gọi AJAX trong Rails 5.1

Trong phiên bản Rails 5.1 Jquery đã bị loại bỏ, mà thay vào đó một thư viện của riêng Rails được thay thế và có tính năng giống như Jquery đó là rails-ujs.

Một đặc trưng phổ biến nhất của Jquery trong Rails đó chính là thực hiện call Ajax. Nếu như bạn sử dụng Ajax trong Rails 5.1 lần đầu tiên, bạn có thể bị nhầm lẫn như: định dạng params, thẻ CSRF.

Vì vậy bài này sẽ hướng dẫn bạn 1 số ví dụ sau:

1. Use rails-ujs (no jQuery)

Trong Rails 5.1 đã tự động thêm rails-ujs vào trong file application.js đồng nghĩa với việc bạn có thể sử dụng ngay lập tức mà không cần thiết lập nhiều.

Nếu bạn không muốn đưa nó vào và chỉ muốn sử dụng một cách chọn lọc. Ví dụ như bạn sử dụng React với Rails webpack khi đó bạn có thể dùng rails-ujs trong file install t của ứng dụng.

$ yarn add rails-ujs

Sau khi install để dùng bạn thêm vào file Script của mình như sau:

import Rails from 'rails-ujs'
Rails.start()

Xóa dòng //= require rails-ujs trong file application.js.

Ngay bây giờ, bạn muốn gọi tạo một Ajax Post để gọi API với một dữ liệu sau:

mydata = {
 thing: {
  field1: value1,
  field2: value2,
}}

Tạo một Ajax bằng rails-ujs nó cũng giống như gọi bằng jQuery.

Rails.ajax({
  type: "POST", 
  url: "/things",
  data: mydata,
  success: function(repsonse){...},
  error: function(repsonse){...}
})

Ngoại trừ 1 điều: bạn không thể chỉ đơn giản gửi một dữ liệu JSON. Vì vậy chúng ta cần đổi một mydata thành nội dung application/x-www-form-urlencoded có nội dung giống như:

mydata = 'thing[field1]=value1&thing[field2]=value2' Jquery tự chuyển đổi tự data trước khi hoạt động yêu cầu.

2.Use jQuery

Nếu việc chuyển đổi dữ liệu thủ công làm khó bạn, bạn vẫn có thể sử dụng jQuery. Bạn có thể dựa vào jQuery cho những thứ khác trong ứng dụng của bạn, vì vậy đây là một vài cách sử dụng jQuery với Rails để thực hiện AJAX:

2.1 Use the jquery-rails gem

Gem này được sử dụng để được mặc định trong phiên bản trước của Rails. Bạn có thể cài đặt nó bằng cách thêm nó vào Gemfile của bạn:

gem 'jquery-rails'

sau đó chạy

$ bundle install

Và thêm jquery và jquery_ujs trong tệp application.js:

//= require jquery
//= require jquery_ujs

Sau đó bạn có thể dùng:

$.ajax({
  type: "POST", 
  url: "/things",
  data: mydata,
  success: function(data, textStatus, jqXHR){...},
  error: function(jqXHR, textStatus, errorThrown){...}
})

Jquery_ujs sẽ để ý đến việc thêm CSRF và jquery sẽ tự động chuyển đổi dữ liệu thành loại application/x-www-form-urlencoded

2.2. Use jquery package from npm

Nếu bạn không dùng Gemfile bạn có thể dùng JavaScript package trong NPM.

$ yarn add jquery
$ yarn add jquery-ujs

Sau đó bạn thêm vào file Javascript:

import $ from ‘jquery’
import {} from ‘jquery-ujs’

Chắc chắn rằng bạn đã bỏ gem jquery-rails và xóa jquery_ujs trong file application.js.

Bạn có thể gặp lỗi khi nói rằng jQuery không được định nghĩa. Trong tệp tin cấu hình webpack của bạn, hãy thêm vào mảng config.plugins:

new webpack.ProvidePlugin({
 $: “jquery”,
 jQuery: “jquery”
})

Và bây giờ bạn sẽ có thể sử dụng jQuery để thực hiện cuộc gọi AJAX của bạn.

3. Use axios

axios là một thư viện HTTP. Bạn có thể sử dụng nó để thực hiện các yêu cầu HTTP từ node.js (trên máy chủ) và các yêu cầu AJAX từ trình duyệt.

Đó là một lựa chọn tốt nếu bạn không cần bất kỳ tính năng khác của jQuery. Để sử dụng axios trong ứng dụng Rails 5.1 (với webpacker), hãy cài đặt nó:

$ yarn add axios

Sau đó thêm nó vào tệp JavaScript của bạn:

import axios from ‘axios’

Bây giờ chúng ta có thể call AJAX như sau:

axios({
  method: 'POST', 
  url: '/things',
  data: mydata,
  headers: {
    'X-CSRF-Token': document.querySelector("meta[name=csrf-token]").content
  }
})
.then(function(response) {...},
.catch(function(error) {...}
})

Một số điều cần lưu ý ở đây:

Chúng ta phải bao gồm tiêu đề token CSRF. Không giống như jquery_ujs và ray-ujs, nó không tự động được thêm trong yêu cầu.

Chúng tôi có thể chỉ định nó như là một thiết lập mặc định để tránh lặp lại nó trong tất cả các cuộc gọi AJAX của chúng tôi:

const csrfToken = document.querySelector("meta[name=csrf-token]").content
axios.defaults.headers.common[‘X-CSRF-Token’] = csrfToken

4.Kết

Cám ơn bạn đã tho dõi.

Phần này được mình dịch tại: Learnetto.