Cách dụng JSON trong Javascript với Ajax

JSON là viết tắt của JavaScript Object Notation, là một kiểu định dạng dữ liệu tuân theo một quy luật nhất định mà hầu hết các ngôn ngữ lập trình hiện nay đều có thể đọc được. JSON là một tiêu chuẩn mở để trao đổi dữ liệu trên web.

Định dạng JSON sử dụng các cặp key – value để dữ liệu sử dụng. Nó hỗ trợ các cấu trúc dữ liệu như đối tượng và mảng. Ví dụ một tập tin có tên topdev_info.json với nội dung như ở dưới đây sử dụng format kiểu JSON để lưu trữ thông tin:

{ "name" : "TopDev", "title" : "Việc làm IT cho Top Developers", "description" : "là hệ sinh thái bao gồm cộng đồng các Top Developers." }

Ta có thể thấy cú pháp của JSON có 2 phần đó là key và value:

• Chuỗi JSON được bao lại bởi dấu ngoặc nhọn {}
• Các key, valuecủa JSON bắt buộc phải đặt trong dấu nháy kép {“}, nếu bạn đặt nó trong dấu nháy đơn thì đây không phải là một chuỗi JSON đúng chuẩn. Nếu trường hợp trong value của bạn có chứa dấu nháy kép " thì hãy dùng dấu [\] để đặt trước nó, ví dụ  \"json là gì\".
• Nếu có nhiều dữ liệu thì dùng dấu phẩy , để ngăn cách.
• Các key của JSON bạn nên đặt chữ cái không dấu hoặc số, dấu _ và không có khoảng trắng., ký tự đầu tiên không nên đặt là số.

File json có thể được lưu với bất kỳ phần mở rộng nào, tuy nhiên thông thường thì nó được lưu dưới phần mở rộng là .json hoặc .js.

JSON ban đầu được phát triển để dành phục vụ cho ứng dụng viết bằng JavaScript. Tuy nhiên vì JSON là một định dạng dữ liệu nên nó có thể được sử dụng bởi bất cứ ngôn ngữ nào mà không bị giới hạn.

Giá trị key trong JSON có thể là chuỗi [string], số [numner], rỗng [null], mảng [array], hoặc đối tượng [object].

Tìm việc làm cho lập trình JSON

Tìm việc làm lập trình Javascript

Object trong Json được thể hiện bằng dấu ngoặc nhọn {}. Khái niệm Object trong Json cũng khá tương đồng với Object trong Javascript. Tuy nhiên, Object trong Json vẫn có những giới hạn như:

• Key: phải luôn nằm trong dấu ngoặc kép, không được phép là biến số.
• Value: Chỉ cho phép các kiểu dữ liệu cơ bản: numbers, String, Booleans, arrays, objects, null. Không cho phép function, date, undefined.
• Không cho phép dấy phẩy cuối cùng như Object trong Javascript.

var nhat = { "firstName" : "Nhat", "lastName" : "Nguyen", "age" : "34" }; var employees = [{ "name" : "Binh", "age" : "38", "gender" : "male" }, { "name" : "Nhat", "age" : "34", "gender" : "male" }, { "name" : "Nhu", "age" : "25", "gender" : "female" }]; var employees = { "hieu" : { "name" : "Hieu", "age" : "29", "gender" : "male" }, "nhat" : { "name" : "Nhat", "age" : "34", "gender" : "male" }, "nhu" : { "name" : "Nhu", "age" : "25", "gender" : "female" } }

Đó là khi bạn muốn lưu trữ dữ liệu đơn thuần dưới dạng metadata ở phía server. Chuỗi JSON sẽ được lưu vào database và sau đó khi cần dữ liệu thì sẽ được giải mã. Ví dụ với PHP, nó cung cấp các hàm liên quan đến JSON để mã hóa hoặc giải mã là json_encode và json_decode.

Một trường hợp khá phổ biến trong JavaScript mà dữ liệu được định dạng theo format JSON xuất hiện đó là trong các AJAX request.

Ví dụ bạn tạo tập tin topdev_info.json ở thư mục gốc của server [để khi request vào URL //localhost/topdev_info.json thì server trả về nội dung của tập tin này] và sau đó bạn tạo một tập tin topdev_ajax.html với nội dung như sau:

$.ajax[ type: 'GET', url: "//localhost/topdev_info.json", success: function[response] { console.log["Data type: " + [typeof response]]; console.log["Application name: " + response.name]; }, ];

Đoạn code trên sử dụng $.ajax[] để gửi AJAX request lên server lấy về nội dung file topdev_info.json. Sau khi lấy về nội dung tập tin này thành công, dữ liệu sẽ được chuyển vào biến response.

Nếu bạn mở developer console của trình duyệt lên [nhấn phím F12] bạn sẽ thấy kiểu dữ liệu của biến response này được JavaScript object với các thuộc tính như name, title, decription.

  Ngừng lo lắng và học cách yêu hệ sinh thái JavaScript!

  Những hàm Javascript hay sử dụng mà bạn nên nhớ [Phần 1]

AJAX [Asynchronous JavaScript And XML] là một kỹ thuật phát triển web có tính tương tác cao thông qua việc kết hợp các công nghệ: XML, HTML, CSS và JavaScript. Trong đó:

• HTML [hoặc XHTML] với CSStrong việc hiển thị thông tin
• Mô hình DOM [Document Object Model], được thực hiện thông qua JavaScript, nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị.
• Đối tượng XMLHttpRequest để nhận dữ liệu từ server một cách không đồng bộ.
• XML thường là định dạng cho dữ liệu truyền, mặc dầu bất cứ định dạng nào cũng có thể dùng, bao gồm HTML định dạng trước, văn bản thuần [plain text], JSON và ngay cả EBML. Đây là một công nghệ giúp chúng ta tạo ra những Web động mà hoàn toàn không reload lại trang. Đối với công nghệ web hiện nay thì ajax không thể thiếu, nó là một phần làm nên sự sinh động cho website. Ajax được viết bằng ngôn ngữ Javascript nên nó chạy trên client, tức là mỗi máy [user] sẽ chạy độc lập không hoàn toàn ảnh hưởng lẫn nhau. Hiện nay có nhiều thư viện javascript như jQuery hay Angular đều hỗ trợ kỹ thuật này nhằm giúp chúng ta thao tác dễ dàng hơn. Ở bài viết này mình sẽ dùng Ajax với thư viện JQuery.

Làm quen với Ajax đối với 1 số chức năng cơ bản

Mình sẽ tạo app nhỏ để đăng kí và quản lý user và dùng Ajax cho 3 chức năng là tạo mới[create] user, xóa[destroy] user và tìm kiếm[search] user. Đầu tiên, khởi tạo 1 app mới:

rails new ajax_practice

sau đó tạo scaffold user:

rails g scaffold user name:string

Chạy migrate:

rails db:migrate

Để thuận tiện thì mình sẽ gộp toàn bộ các chức năng tạo mới và xóa user trong view index:

Create User

Bình thường khi submit 1 form, params user nhập vào từ client trong 1 request sẽ được routes điều hướng lên server xử lí sau đó sẽ redirect user tới 1 trang khác với thông tin được trả về từ phía server. Đối với Ajax, khi ấn submit, request sẽ thông qua Ajax gửi ngầm lên phía server, dữ liệu trả về sẽ được Ajax tiếp nhận và xử lí theo từng thẻ html riêng biệt trong màn hình hiển thị hiện tại. trong file index.html.erb

We have total users!

. . .

Tạo file ajax.js trong assets/javascripts:

$[document].ready[function[] { # ready when html elements and DOM are loaded $['#new_user'].on['submit', function[e] { #Bắt event submit của thẻ có id: new_user var name = $['#user_name'].val[]; # Khai báo và gán giá trị thẻ có id: user_name vào biến name e.preventDefault[]; # ngăn chặn hành động mặc định của button submit khi xảy ra sự kiện if [name] { $.ajax[{ url: '/users', # gửi request tới server theo đường dẫn /users type: 'post', # phương thức tương ứng là POST dataType: 'json', # data gửi đi dưới dạng JSON data: {user: {name: name}}, # data gửi đi tương ứng với params[:user][:name] }] .done[function[data] { #sau khi Ajax nhận được data từ server trả về và user được save $['tbody'].append[data.user_data]; #chèn thêm data.user_data vào cuối thẻ $['.users-size'].text[[parseInt[$['.users-size'].text[]] + 1]]; # lấy giá trị text của thẻ span có class = users-size, chuyển về dạng int rồi cộng thêm 1, sau đó gán lại vào giá trị text của chính nó }] .fail[function[]{ # trường hợp user không save được alert["Can create new user! We got some errors"]; }] } else { alert["Name can be blank"] } return false; # kết thúc sự kiện }] }]

trong users_controller:

class UsersController < ApplicationController . . . def create @user = User.new[user_params] if @user.save render json: { # sau khi user save, trả về client user_data dạng json user_data: render_to_string[@user] # data trả về được render từ html sang chuỗi string, ở đây là partial _user.html.erb }, status: :ok # Rails status code symbol else render error, status: :unauthorized end end private def user_params params.require[:user].permit[:name] end end

Đã xong chức năng tạo mới user, để rõ hơn có thể dùng debugger để thấy sau khi user nhấn submit, hành động mặc định bị hoãn, request từ client được Ajax gửi lên dưới dạng chuỗi JSON { user, { name: name} }. Sau khi xử lí, trên server trả về chuỗi JSON được format thành thẻ

rồi dùng javascript chèn vào đầu thẻ

, đồng thời cũng cập nhật lại giá trị thẻ

tương ứng với tổng số user hiện tại.

Delete User

Về chức năng xóa user, cũng gần như tương tự, trong file ajax.js mình thêm sự kiện ấn vào button delete:

$[document].ready[function[] { . . . $['.tbody'].on['click', '.destroy', function[] { var id = $[this].data['id'] # Khai báo biến id và gán vào id của user cần delete thông qua thuộc tính data-id của thẻ có class = "destroy" var childTr = $[this].closest['tr'] # Khai báo biến childTr và gán vào thẻ gần nhất của thẻ có class = "destroy" $.ajax[{ url: '/users/' + id, type: 'delete' }] .done[function[] { childTr.hide[]; # ẩn đi thẻ được gán $['.users-size'].text[[parseInt[$['.users-size'].text[]] - 1]]; # cập nhật lại giá trị text của thẻ có class = "user-size" }] return false; }] }]

Trong partial _user.html.erb mình set data-id và class ="destroy" cho thẻ

Thêm action destroy trong Userscontroller:

class UsersController < ApplicationController . . . def destroy @user = User.find_by id: params[:id] @user.destroy end . .

Sau đó chúng ta có kết quả:

Search User

Bây giờ chúng ta tới chức năng Search, để dễ nhìn thì mình sẽ tạo 1 controller và view search riêng: Đầu tiên, tạo route cho search:

Rails.application.routes.draw do . . resources :searches, only: [:index] end

Ở view search index.html.erb :

# build form search với request method là get

Name Action

Trong User model:

class User < ApplicationRecord validates :name, presence: true scope :search, ->q{where "name LIKE ?", "%#{q}%"} end

Ở phía controller:

class SearchesController < ApplicationController def index if request.xhr? # kiểm tra request gửi lên có phải là xhr request của ajax không? @users = User.search[params[:name]] #gọi đến hàm scope :search ở User model render json: { search_result: render_to_string[@users] }, status: :ok else @users = User.all end end end

Còn phần xử lí ajax:

$[document].ready[function[] { . . $['.search-box'].on['keyup', function[] { var key_name = $[this].val[]; $.ajax[{ url: '/searches', type: 'get', dataType: 'json', data: {name: key_name}, }] .done[function[data] { $['.user-table'].html[data.search_result]; # Gán giá trị html search_result [được controller trả về] vào thẻ có class = "user-table" // console.log[data.search_result] }] return false; }] }]

Và ta được kết quả:

Lời kết

Bài viết này nhằm giới thiệu qua về Jquery Ajax và ứng dụng nó trong 1 số chức năng cơ bản. Bài viết còn tồn tại nhiều hạn chế, rất mong nhận được những đóng góp và phản hồi tích cực. Cảm ơn bạn đã theo dõi bài viết.