Trình định dạng html json

JSON là văn bản và ta có thể chuyển đổi bất kỳ đối tượng JavaScript nào thành JSON và gửi JSON đến máy chủ

Ta cũng có thể chuyển đổi bất kỳ JSON nào nhận được từ máy chủ thành các đối tượng JavaScript

Bằng cách này, chúng ta có thể làm việc với dữ liệu dưới dạng các đối tượng JavaScript mà không cần phân tích cú pháp và dịch phức tạp

Gửi dữ liệu

Nếu dữ liệu của bạn được lưu trữ trong một đối tượng JavaScript, bạn có thể chuyển đổi đối tượng đó thành JSON và gửi nó đến máy chủ

Ví dụ

html>
<html>
<body>

<h2>Convert a JavaScript object into a JSON string, and send it to the server.h2>

<script>
  var myObj = { name: "John", age: 31, city: "New York" };
  var myJSON = JSON.stringify(myObj);
  window.location = "demo_json.php?x=" + myJSON;
script>

body>
html>

Bạn sẽ tìm hiểu thêm về hàm 





Lưu trvà truy xut dliu tlocalStorage.

"demo">

2 trong bài viết phía sau

Get data

Nếu bạn nhận được dữ liệu ở định dạng JSON, bạn có thể chuyển đổi nó thành một đối tượng JavaScript

Ví dụ

html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.h2>

<p id="demo">p>

<script>
  var myJSON = '{"name":"John", "age":31, "city":"New York"}';
  var myObj = JSON.parse(myJSON);
  document.getElementById("demo").innerHTML = myObj.name;
script>

body>
html>

Bạn sẽ tìm hiểu thêm về hàm 





Lưu trvà truy xut dliu tlocalStorage.

"demo">

3 trong hướng dẫn phía sau

Lưu trữ và truy xuất dữ liệu

Khi lưu trữ dữ liệu, dữ liệu phải ở một định dạng nhất định và cho dù bạn chọn lưu trữ ở đâu, văn bản luôn là một trong các định dạng hợp lệ

JSON có thể lưu trữ các đối tượng JavaScript dưới dạng văn bản

Ví dụ





Lưu trvà truy xut dliu tlocalStorage.

"demo">

JSON là gì?

  • JSON là viết tắt của Java Script Object Ký hiệu
  • JSON là một định dạng trao đổi dữ liệu nhẹ
  • JSON là "tự mô tả" và dễ hiểu
  • JSON độc lập với ngôn ngữ *

*
JSON sử dụng cú pháp JavaScript, nhưng định dạng JSON chỉ là văn bản.
Có thể đọc được văn bản và sử dụng định dạng dữ liệu bằng bất kỳ ngôn ngữ lập trình nào.

Định dạng ban đầu JSON định dạng được chỉ định bởi Douglas Crockford

Tại sao sử dụng JSON?

Vì định dạng JSON chỉ là văn bản nên nó có thể dễ dàng được gửi đến và đi từ máy chủ và được sử dụng làm định dạng dữ liệu bởi bất kỳ ngôn ngữ lập trình nào

JavaScript có một hàm tích hợp để chuyển đổi một chuỗi, được viết ở định dạng JSON, thành các đối tượng JavaScript gốc





Lưu trvà truy xut dliu tlocalStorage.

"demo">

3

Vì vậy, nếu bạn nhận dữ liệu từ máy chủ, ở định dạng JSON, bạn có thể sử dụng nó như bất kỳ đối tượng JavaScript nào khác

  • Lập Trình
Hiểu rõ về JSON là gì?

101443

Facebook

liên kết

điện báo

lục mục lục

  1. JSON là gì?
  2. định nghĩa
  3. Cấu trúc chuỗi JSON
    1. Đối tượng là gì?
    2. Type OBJECT
    3. Type OBJECT IN ARRAY
    4. Type NEST OBJECT
  4. Nên sử dụng JSON khi nào

JSON là gì?

JSON là viết tắt của JavaScript Object Ký hiệu, là một kiểu định dạng dữ liệu tuân theo một quy định 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

Trình định dạng html json
Trình định dạng html json

định nghĩa

Định dạng JSON sử dụng các cặp





Lưu trvà truy xut dliu tlocalStorage.

"demo">

5 – 




Lưu trvà truy xut dliu tlocalStorage.

"demo">

6 để sử dụng dữ liệu. 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




Lưu trvà truy xut dliu tlocalStorage.

"demo">

7 với nội dung như ở dưới đây sử dụng định dạng kiểu JSON để lưu trữ thông tin

Trình định dạng html json
Trình định dạng html json

{
    "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à





Lưu trvà truy xut dliu tlocalStorage.

"demo">

5 và




Lưu trvà truy xut dliu tlocalStorage.

"demo">

6

  • Chuỗi JSON được bao lại bởi dấu ngoặc kép {}
  • Các 
    
    
    
    
    

    Lưu trvà truy xut dliu tlocalStorage.

    "demo">

    5, 
    
    
    
    
    

    Lưu trvà truy xut dliu tlocalStorage.

    "demo">

    6 of JSON bắt buộc phải đặt trong dấu nháy kép {“}, nếu bạn đặt nó trong 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
    
    
    
    
    

    Lưu trvà truy xut dliu tlocalStorage.

    "demo">

    6 của bạn có chứa dấu nháy kép
    var nhat = {
       "firstName" : "Nhat",
       "lastName" : "Nguyen",
       "age" :  "34"
    };
    3 thì hãy dùng dấu (\) để đặt trước nó, ví dụ như
    var nhat = {
       "firstName" : "Nhat",
       "lastName" : "Nguyen",
       "age" :  "34"
    };
    4
  • Nếu có nhiều dữ liệu thì dùng dấu phẩy
    var nhat = {
       "firstName" : "Nhat",
       "lastName" : "Nguyen",
       "age" :  "34"
    };
    5 để ngăn chặn
  • Các
    
    
    
    
    

    Lưu trvà truy xut dliu tlocalStorage.

    "demo">

    5 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. , first character does not set a number

Tệp 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 theo phần mở rộng là

var nhat = {
   "firstName" : "Nhat",
   "lastName" : "Nguyen",
   "age" :  "34"
};
7 hoặc 
var nhat = {
   "firstName" : "Nhat",
   "lastName" : "Nguyen",
   "age" :  "34"
};
8

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 kỳ ngôn ngữ nào mà không bị giới hạn

Key value in JSON can be string (chuỗi), number (số), rỗng (null), mảng (array), or object (đối tượng)

Find work to setting JSON

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

Cấu trúc chuỗi JSON

Đối tượng là gì?

Object in Json could be current by a quote quote {}. 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ư

  • Chìa khóa. must always be in the dấu ngoặc kép, not allow is a number variable
  • Giá trị. Chỉ cho phép các kiểu dữ liệu cơ bản. số, Chuỗi, Booleans, mảng, đối tượng, null. Không cho phép chức năng, ngày tháng, không xác định
  • Cannot allow the end of the end as Object in Javascript

Type OBJECT

var nhat = {
   "firstName" : "Nhat",
   "lastName" : "Nguyen",
   "age" :  "34"
};

Type OBJECT IN ARRAY

html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.h2>

<p id="demo">p>

<script>
  var myJSON = '{"name":"John", "age":31, "city":"New York"}';
  var myObj = JSON.parse(myJSON);
  document.getElementById("demo").innerHTML = myObj.name;
script>

body>
html>
0

Type NEST OBJECT

html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.h2>

<p id="demo">p>

<script>
  var myJSON = '{"name":"John", "age":31, "city":"New York"}';
  var myObj = JSON.parse(myJSON);
  document.getElementById("demo").innerHTML = myObj.name;
script>

body>
html>
1

Nên sử dụng JSON khi nào

Đó là khi bạn muốn lưu trữ dữ liệu đơn thuần dưới dạng siêu dữ liệu ở phía máy chủ. Chuỗi JSON sẽ được lưu vào cơ sở dữ liệu 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 định dạng JSON xuất hiện đó là trong các yêu cầu AJAX

Ví dụ bạn tạo tệp





Lưu trvà truy xut dliu tlocalStorage.

"demo">

7 tại thư mục gốc của máy chủ (để khi yêu cầu vào URL
html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.h2>

<p id="demo">p>

<script>
  var myJSON = '{"name":"John", "age":31, "city":"New York"}';
  var myObj = JSON.parse(myJSON);
  document.getElementById("demo").innerHTML = myObj.name;
script>

body>
html>
00, máy chủ sẽ trả về nội dung của tệp này) và sau đó bạn tạo tệp
html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.h2>

<p id="demo">p>

<script>
  var myJSON = '{"name":"John", "age":31, "city":"New York"}';
  var myObj = JSON.parse(myJSON);
  document.getElementById("demo").innerHTML = myObj.name;
script>

body>
html>
01 với nội dung như sau

html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.h2>

<p id="demo">p>

<script>
  var myJSON = '{"name":"John", "age":31, "city":"New York"}';
  var myObj = JSON.parse(myJSON);
  document.getElementById("demo").innerHTML = myObj.name;
script>

body>
html>
4

Đoạn mã trên sử dụng 

html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.h2>

<p id="demo">p>

<script>
  var myJSON = '{"name":"John", "age":31, "city":"New York"}';
  var myObj = JSON.parse(myJSON);
  document.getElementById("demo").innerHTML = myObj.name;
script>

body>
html>
02 để gửi yêu cầu AJAX lên máy chủ lấy về tệp nội dung




Lưu trvà truy xut dliu tlocalStorage.

"demo">

7. Sau khi lấy về tập tin nội dung này thành công, dữ liệu sẽ được chuyển vào biến 
html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.h2>

<p id="demo">p>

<script>
  var myJSON = '{"name":"John", "age":31, "city":"New York"}';
  var myObj = JSON.parse(myJSON);
  document.getElementById("demo").innerHTML = myObj.name;
script>

body>
html>
04

Nếu bạn mở bảng điều khiển dành cho nhà phát triển 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 

html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.h2>

<p id="demo">p>

<script>
  var myJSON = '{"name":"John", "age":31, "city":"New York"}';
  var myObj = JSON.parse(myJSON);
  document.getElementById("demo").innerHTML = myObj.name;
script>

body>
html>
04 đây là JavaScript 
html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.h2>

<p id="demo">p>

<script>
  var myJSON = '{"name":"John", "age":31, "city":"New York"}';
  var myObj = JSON.parse(myJSON);
  document.getElementById("demo").innerHTML = myObj.name;
script>

body>
html>
06 với các thuộc tính như 
html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.h2>

<p id="demo">p>

<script>
  var myJSON = '{"name":"John", "age":31, "city":"New York"}';
  var myObj = JSON.parse(myJSON);
  document.getElementById("demo").innerHTML = myObj.name;
script>

body>
html>
07, 
html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.h2>

<p id="demo">p>

<script>
  var myJSON = '{"name":"John", "age":31, "city":"New York"}';
  var myObj = JSON.parse(myJSON);
  document.getElementById("demo").innerHTML = myObj.name;
script>

body>
html>
08, 
html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.h2>

<p id="demo">p>

<script>
  var myJSON = '{"name":"John", "age":31, "city":"New York"}';
  var myObj = JSON.parse(myJSON);
  document.getElementById("demo").innerHTML = myObj.name;
script>

body>
html>
09

Bài viết liên quan về JSON, tham khảo thêm tại đây nè

  • JSON-LD là gì ?
  • Chuyển đổi JSON qua CSV sử dụng thư viện Jackson
  • Ứng dụng JSON. phân tích cú pháp để cải thiện tốc độ?

Hy vọng với bài viết này bạn sẽ hiểu rõ hơn về JSON là gì cũng giống như các ứng dụng và cấu trúc của nó như thế nào. Đừng quên cập nhật thêm các nội dung mới hữu ích cho các Dever tại TopDev Blog nhé. Cảm ơn các bạn vì đã luôn ủng hộ họ