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. Show Đị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:
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.
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ư:
Đó 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 http://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: Đ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 đó:
Làm quen với Ajax đối với 1 số chức năng cơ bảnMì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_practicesau đó tạo scaffold user: rails g scaffold user name:stringChạ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 UserBì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.size %> users!
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 endCò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ếtBà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. Bài Viết Liên QuanQuảng CáoCó thể bạn quan tâmToplist được quan tâm#1
#2
Top 10 lời chúc mừng sinh nhật con trai 3 tuổi 20237 tháng trước#3
Top 8 từ ghép trong bài việt nam quê hương ta 20237 tháng trước#4
Top 17 r la gì trong vật lý 10 20237 tháng trước#5
#6
Top 8 sữa tươi tách béo không đường vinamilk 20237 tháng trước#8
Top 8 ý nghĩa của câu gan vàng dạ sắt 20237 tháng trước#9
Top 8 mẫu bánh sinh nhật cho be trai 3 tuổi 20237 tháng trướcQuảng cáoXem NhiềuQuảng cáoChúng tôiTrợ giúpBản quyền © 2021 Blog của Thư Inc.
|