Phân tích cú pháp JQuery JSON – jquery phân tích cú pháp json mảng đối tượng

Hướng dẫn phân tích cú pháp JQuery JSON. Ở đây chúng ta thảo luận về Cách thức hoạt động và các ví dụ của JQuery JSON Parse cùng với các mã và kết quả đầu ra một cách chi tiết.

Bạn đang xem : jquery phân tích cú pháp mảng json của các đối tượng

JQuery JSON Parse

Giới thiệu về JQuery JSON Parse

Phương thức jQuery.parseJSON () được sử dụng để triển khai phân tích cú pháp các chuỗi JSON trong jQuery. Phương thức này nhận một chuỗi JSON có cấu trúc tốt và biến đổi nó để trả về một đối tượng JavaScript kết quả. Vì JSON thường được sử dụng để trao đổi dữ liệu giữa máy khách và máy chủ và dữ liệu nhận được từ máy chủ luôn là một chuỗi, nên cần phải chuyển đổi một chuỗi thành dữ liệu JSON. Điều này có thể thực hiện được với phương thức jQuery.parseJSON (). Phương thức jQuery này sử dụng nội bộ phương thức JavaScript JSON.parse (). Viết tắt của phương thức này là $ .parseJSON ().

Cú pháp

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

jQuery.parseJSON (json)

Trong đó json đề cập đến chuỗi JSON sẽ được phân tích cú pháp.

Chữ ký trên trả về một đối tượng JavaScript sau khi phân tích cú pháp một chuỗi JSON có cấu trúc tốt.

Phân tích cú pháp JQuery JSON hoạt động như thế nào?

  • Mục đích cơ bản của việc sử dụng phương thức parseJSON () là chuyển đổi một chuỗi JSON thành một đối tượng JavaScript tương ứng.
  • JSON là một định dạng để lưu trữ và trao đổi dữ liệu giữa máy chủ và máy khách (trình duyệt).
  • Giao tiếp giữa máy chủ và máy khách chỉ xảy ra thông qua văn bản hoặc chuỗi.
  • JSON là một chuỗi có thể được hình thành bằng cách chuyển đổi các đối tượng JavaScript thành JSON trước khi được gửi đến máy chủ.
  • Tương tự, bất kỳ JSON nào nhận được từ máy chủ cũng có thể được chuyển đổi thành đối tượng JavaScript tương ứng bằng phương thức parseJSON ().
  • Nếu chuỗi JSON không được định dạng tốt ở định dạng chính xác trước khi chuyển nó đến phương thức parseJSON (), trình duyệt có thể đưa ra một ngoại lệ.

Ví dụ: , {val: 1} không có dấu ngoặc kép xung quanh nó

{‘val’: 1} có các dấu ngoặc kép xung quanh nó thay vì dấu ngoặc kép

Vì các chuỗi này không ở định dạng JSON chính xác, một ngoại lệ sẽ được đưa ra bởi phương thức jQuery.parseJSON () khi phân tích cú pháp chúng.

  • Nếu null, undefined hoặc một chuỗi trống được chuyển đến phương thức parseJSON (), nó sẽ trả về giá trị null.

Ví dụ về phân tích cú pháp JQuery JSON

Hãy cùng chúng tôi xem qua một vài ví dụ để hiểu cách triển khai phương thức jQuery.parseJSON ()

Ví dụ # 1

Ví dụ này minh họa cách sử dụng đơn giản của phương thức jQuery.parseJSON ().

Mã:

& lt; html & gt;
& lt; đầu & gt;
& lt; script src = "https://code.jquery.com/jquery-1.12.4.js" & gt; & lt; / script & gt;
& lt; script & gt;
$ (tài liệu) .ready (function () {
var jsonStr =
'{"firstName": "Mike", "emailId": "mike123@xyz.com", "age": 30, "city": "California"}';
var obj = $ .parseJSON (jsonStr);
document.getElementById ("name"). innerHTML = obj.firstName;
document.getElementById ("email"). innerHTML = obj.emailId;
document.getElementById ("tuổi"). innerHTML = obj.age;
document.getElementById ("city"). innerHTML = obj.city;
});
& lt; / script & gt;
& lt; phong cách & gt;
#divstyle {
chiều rộng: 500px;
chiều cao: 280px;
padding-top: 20px;
padding-left: 5px;
font-size: 20px;
text-align: center;
màu: hạt dẻ;
background-color: cadetblue;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div id = "divstyle" & gt;
& lt; h3 style = "color: black;" & gt; Ví dụ cho jQuery parseJSON () & lt; / h3 & gt;
& lt; hr / & gt;
& lt; p id = "name" & gt; Tên của người & lt; / p & gt;
& lt; p id = "email" & gt; Id Email của người & lt; / p & gt;
& lt; p id = "age" & gt; Tuổi của người & lt; / p & gt;
& lt; p id = "city" & gt; City of Residence & lt; / p & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

  • Màn hình bên dưới hiển thị sau khi mã ở trên được thực thi.
Xem Thêm  Cách tạo bảng trong MySQL {Và dữ liệu hiển thị} - cách tạo bảng trong mysql

JQuery json parse output 1

  • Trong ví dụ này, khi trang được tải, chuỗi JSON jsonStr được phân tích cú pháp bằng phương thức $ .parseJSON (jsonStr) thành biến obj về cơ bản là một đối tượng.
  • Chúng tôi thấy các thuộc tính của đối tượng được tạo từ dữ liệu JSON được hiển thị trên trang.

Ví dụ # 2

Ví dụ này là một minh chứng khác về cách phương thức jQuery.parseJSON () được sử dụng để tạo đối tượng JS được phân tích cú pháp từ dữ liệu JSON.

Mã:

& lt; html & gt;
& lt; đầu & gt;
& lt; script src = "https://code.jquery.com/jquery-1.12.4.js" & gt; & lt; / script & gt;
& lt; script & gt;
$ (function () {
$ ('# btn'). one ('click', function () {
var obj = jQuery.parseJSON ('{"text1": "jQuery.parseJSON () method", "text2": "phân tích cú pháp chuỗi JSON thành các đối tượng JS"}');
$ ('# divstyle'). append (obj.text1 + obj.text2);
$ ("# btn"). hide ();
});
});
& lt; / script & gt;
& lt; phong cách & gt;
#divstyle {
chiều rộng: 300px;
chiều cao: 200px;
padding-top: 20px;
padding-left: 5px;
font-size: 20px;
text-align: center;
màu: hạt dẻ;
background-color: cadetblue;
}
& lt; / style & gt;
& lt; body & gt;
& lt; div id = "divstyle" & gt;
& lt; h3 style = "color: black;" & gt; jQuery parseJSON () & lt; / h3 & gt; & lt; hr & gt;
& lt; center & gt;
& lt; br & gt;
& lt; button id = "btn" & gt; Nhấp vào Tôi! & lt; / button & gt;
& lt; / center & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

  • Màn hình bên dưới hiển thị sau khi mã ở trên được thực thi.
  • Dữ liệu JSON định dạng tốt sẽ được phân tích cú pháp thành một biến, obj, về cơ bản là một đối tượng khi nhấp vào nút.
  • Văn bản hiển thị trên trang về cơ bản được hình thành từ các thuộc tính của đối tượng được tạo từ dữ liệu JSON đã phân tích cú pháp.

Ví dụ # 3

Ví dụ sau là một minh họa về cách phương thức jQuery.parseJSON () hoạt động với phản hồi JSON từ một lệnh gọi jQuery ajax.

Mã:

& lt; html & gt;
& lt; đầu & gt;
& lt; script src = "https://code.jquery.com/jquery-1.12.4.js" & gt; & lt; / script & gt;
& lt; script & gt;
$ (tài liệu) .ready (function () {
$ .ajax ({
url: "json_demo.txt",
dataType: "text",
thành công: hàm (dữ liệu) {
var json = $ .parseJSON (dữ liệu);
for (var i = 0; i & lt; json.length; ++ i) {
$ ("# divstyle"). append (
'& lt; div class = "name" & gt;' +
"id:" +
json [i] .id +
"," +
"giá trị:" +
json [i] .name +
"& lt; / & gt;"
);
}
},
});
});
& lt; / script & gt;
& lt; phong cách & gt;
#divstyle {
chiều rộng: 500px;
chiều cao: 280px;
padding-top: 20px;
padding-left: 5px;
font-size: 20px;
text-align: center;
màu: hạt dẻ;
background-color: cadetblue;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div id = "divstyle" & gt;
& lt; h3 style = "color: black;" & gt; jQuery phân tích cú pháp json & lt; / h3 & gt;
& lt; hr / & gt;
& lt; br / & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

  • Màn hình bên dưới hiển thị sau khi mã ở trên được thực thi.
  • Trong ví dụ này, chúng tôi đang cố gắng lấy dữ liệu JSON bằng lệnh gọi jQuery.ajax.
  • Chúng tôi đã sử dụng tệp văn bản txt mà từ đó dữ liệu JSON được tìm nạp và phân tích cú pháp thành một đối tượng chứa dữ liệu ở định dạng JSON.
  • Chúng tôi hiển thị các mục từ dữ liệu JSON được phân tích cú pháp này như thể hiện bên dưới trong hình.
Xem Thêm  Cách viết mã một trang web - cách xây dựng trang web của riêng bạn bằng html và css

output 3

Ví dụ # 4

Ví dụ sau là minh họa về cách các cặp khóa-giá trị được lấy từ dữ liệu JSON đã phân tích cú pháp và hiển thị.

Mã:

& lt; html & gt;
& lt; đầu & gt;
& lt; script src = "https://code.jquery.com/jquery-1.12.4.js" & gt; & lt; / script & gt;
& lt; script & gt;
$ (tài liệu) .ready (function () {
var j =
'[{"id": "1", "name": "val1"}, {"id": "2", "name": "val2"}, {"id": "3", "name" : "val3"}, {"id": "4", "name": "val4"}, {"id": "5", "name": "val5"}] ';
var json = $ .parseJSON (j);
var obj = document.getElementById ("divstyle");
var json_arr = [];
$ .each (json, function (key, value) {
json_arr.push ("key" + "(" + key + ")" + "." + value.name + "& lt; br & gt;");
});
obj.innerHTML = json_arr;
});
& lt; / script & gt;
& lt; phong cách & gt;
#divstyle {
chiều rộng: 300px;
chiều cao: 180px;
padding-top: 20px;
padding-left: 5px;
font-size: 20px;
text-align: center;
màu: hạt dẻ;
background-color: cadetblue;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div id = "divstyle" & gt;
& lt; h3 style = "color: black;" & gt; Ví dụ cho jQuery parseJSON () & lt; / h3 & gt;
& lt; hr / & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

  • Màn hình bên dưới hiển thị sau khi mã ở trên được thực thi.
  • Trong ví dụ này , $ .each được sử dụng để lặp lại dữ liệu JSON đã phân tích cú pháp và lấy các cặp khóa-giá trị vì các đối tượng jSON luôn nằm trong các cặp khóa / giá trị.
  • Như hình bên dưới, mỗi cặp khóa / giá trị được phân tách bằng dấu phẩy.

output 4

Kết luận

Trong bài viết này, chúng tôi đã thảo luận về phân tích cú pháp dữ liệu JSON bằng phương thức parseJSON (). Phương thức parseJSON () chuyển đổi một chuỗi JSON có cấu trúc tốt đã cho thành một đối tượng JavaScript ở định dạng JSON. Nếu chuỗi JSON được truyền vào không có định dạng chính xác, phương thức sẽ ném ra một ngoại lệ.

Các bài báo được đề xuất

Đây là hướng dẫn về Phân tích cú pháp JQuery JSON. Ở đây chúng ta thảo luận về Cách thức hoạt động và các ví dụ của JQuery JSON Parse cùng với các mã và kết quả đầu ra. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề jquery phân tích cú pháp json mảng đối tượng

Easy JavaScript – How to parse an array of JSON data (42)

alt

  • Tác giả: Nazmus Nasir
  • Ngày đăng: 2017-04-08
  • Đánh giá: 4 ⭐ ( 9029 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Welcome to the 42nd Easy JavaScript tutorial, part of EasyProgramming.net. We looked at the for…in loop last time, and I mentioned that you can take it one step further by dynamically creating javaScript Objects inside of an array, and iterate through the array and parse your JSON.

    This is extremely useful when you’re trying to parse large sets of data. You can even use this to create a script like my JSON to Table which allows you to convert ANY JSON input into a neat HTML table: https://www.easyprogramming.net/playground/jtable.php

    To fork the fiddle and follow along: https://jsfiddle.net/easyjs/kwhhLcv9/

    For more information, please visit http://www.EasyProgramming.net to view my other programming tutorials! Find videos of C++ tutorials, Excel tutorials, and JavaScript Tutorials.

    I hope you enjoy the video and if you have any questions, please ask in the comments below. If you have any requests feel free to let me know. Thanks for watching and remember to subscribe!

    EasyJavaScript JavaScript JSON

    ———–
    Visit my website: https://www.easyprogramming.net
    Subscribe on YouTube: https://www.youtube.com/c/nazmusnasir
    Support me on Patreon: https://www.patreon.com/nazmus
    Follow me on Twitter: https://twitter.com/NazmusN
    Like me on Facebook: https://www.facebook.com/EasyProgrammingNet
    Check out my Github: https://github.com/naztronaut

Phân tích cú pháp dữ liệu JSON với jQuery

  • Tác giả: vi.pinlivingcolor.com
  • Đánh giá: 5 ⭐ ( 3924 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có một dịch vụ web trả về JSON này: [{“user_id”: “1”, “user_name”: “User1”, “user_age”: “20”}, {“user_id”: “2”, “user_name”: “User2”, “user_age”: “21”}, {“

jQuery sẽ không phân tích cú pháp JSON của tôi từ truy vấn AJAX

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 7416 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Máy chủ của bạn có đang gửi dữ liệu dưới dạng Content-Type “*/json”không? Nếu không, hãy…

Mảng (Array) trong JSON

  • Tác giả: viettuts.vn
  • Đánh giá: 4 ⭐ ( 4494 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mảng trong JSON đại diện cho danh sách thứ tự các giá trị. Mảng trong JSON có thể lưu trữ nhiều giá trị. Nó có thể lưu trữ chuỗi, số, boolean hoặc đối tượng

JSON tut 5: Phân tích cú pháp JSON – MTVIet Website

  • Tác giả: mtviet.com
  • Đánh giá: 5 ⭐ ( 2765 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phương thức phân tích cú pháp JavaScript JSON ()

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 3 ⭐ ( 1153 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: botvietbai.com cung cấp các hướng dẫn, tài liệu tham khảo và bài tập trực tuyến miễn phí bằng tất cả các ngôn ngữ chính của web. Bao gồm các chủ đề phổ biến như HTML, CSS, JavaScript, Python, SQL, Java, và nhiều hơn nữa.

HOW: Cách phân tích cú pháp một mảng đối tượng json trong jquery

  • Tác giả: vi.beyondthatbouffant.com
  • Đánh giá: 4 ⭐ ( 4118 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có mảng đối tượng json sau [{“id”: 10, “name”: “sinu”}, {“id”: 20, “name”: “shinto”}] Làm cách nào để phân tích cú pháp này bằng jquery và lấy tên, id của từng cái. cảm ơn trước

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Truy vấn phương tiện cấp 4 - truy vấn phương tiện tối đa và tối thiểu