Cách hiển thị dữ liệu json trong html bằng ajax?

Thư viện jQuery cung cấp cho chúng tôi tất cả các loại tính năng và chức năng để có được các tính năng liên quan đến AJAX trên các trang web của chúng tôi. Đó là, jQuery cung cấp cho chúng tôi các chức năng như vậy, sử dụng chức năng này, chúng tôi có thể chạy bất kỳ tập lệnh phía máy chủ nào trong trang web của mình hoặc yêu cầu dữ liệu mới từ máy chủ mà không cần tải lại trang web của chúng tôi và gửi dữ liệu mới đến trang web của chúng tôi

Ngoài ra, các chức năng mà jQuery cung cấp cho chúng tôi liên quan đến AJAX, hoạt động trên tất cả các trình duyệt web do hoàn toàn tương thích với nhiều trình duyệt. Do đó, chúng tôi không cần phải viết các mã JavaScript khác nhau cho các trình duyệt web khác nhau bằng các phương pháp khác nhau

Hôm nay chúng ta sẽ tìm hiểu cách lấy dữ liệu từ API bằng lệnh gọi ajax và hiển thị nó trong bảng HTML bằng jquery

Chúng ta sẽ tạo một trang HTML đơn giản có bảng hiển thị dữ liệu bằng jquery

Chúng ta phải làm theo những điều sau đây

• Đầu tiên, chúng ta phải tạo một trang Html và một bảng trong đó
• Thêm tham chiếu Bootstrap của CSS và Style
• Viết mã JavaScript để nhận Json bằng lệnh gọi Ajax
• Bước cuối cùng Hiển thị dữ liệu json từ jQuery. ajax trong HTML sử dụng vòng lặp

Bước 1. Tạo trang và bảng Html

    
    


    

        How to display JSON data in HTML using ajax
        

        
            
                
                    ID
                    Name
                    Address
                    City
                    ZipCode
                
            
            
        
    

Bước 3. Hiển thị dữ liệu JSON từ URL bằng Ajax

Vì mục đích hiểu biết của chúng tôi, hãy lấy một ví dụ, tôi có một API trả về danh sách nhân viên trong tổ chức

Bây giờ, giả sử chúng ta muốn liên kết phản hồi JSON đó trong bảng HTML. Về cơ bản, chúng tôi sẽ hiển thị dữ liệu JSON trong bảng HTML bằng jQuery

URL. http. // phần còn lại api. đủ cửa hàng. com/api/Siêu dữ liệu/GetEmployees

Phản hồi của Json

[
    {
        "$id": "1",
        "Id": 1,
        "Name": "Pascale Cartrain",
        "Address": "Rua do Mercado, 12",
        "City": "Walla",
        "ZipCode": "243232"
    },
    {
        "$id": "2",
        "Id": 2,
        "Name": "Liu Wong",
        "Address": "DaVinci",
        "City": "Paris",
        "ZipCode": "243232"
    },
    {
        "$id": "3",
        "Id": 3,
        "Name": "Miguel",
        "Address": "Avda. Azteca",
        "City": "London",
        "ZipCode": "243232"
    },
    {
        "$id": "4",
        "Id": 4,
        "Name": "Anabela",
        "Address": "ul. Filtrowa 68",
        "City": "New Delhi",
        "ZipCode": "243232"
    },
    {
        "$id": "5",
        "Id": 5,
        "Name": "Mary Saveley",
        "Address": "Adenauerallee",
        "City": "Tokyo",
        "ZipCode": "243232"
    }
]

Hiển thị phản hồi JSON từ Ajax dưới dạng HTML hoặc bảng

Ở đây tôi đang gọi hàm ajax và hiển thị dữ liệu JSON, thành một bảng mà người dùng dễ đọc. Khi hàm gọi Ajax thành công BindDataWithJqueyEach() javascript sẽ lặp qua từng đối tượng trong mảng JSON,

Phương pháp-2 Sử dụng jQuery. mỗi chức năng liên kết dữ liệu trong bảng

Sử dụng jQuery để tạo các hàng trong bảng từ phản hồi AJAX

chúng tôi đang lấy dữ liệu từ phản hồi ajax phía máy chủ và chúng tôi đang cố gắng tạo động các hàng của bảng và thêm chúng vào bảng HTML hiện có. Chúng ta cũng có thể sử dụng jQuery. từng chức năng nếu bạn không muốn sử dụng vòng lặp for. Xem đoạn mã dưới đây

function BindDataWithJqueyEach(data)
    {
        jQuery.each(data, function (i, val) {
            var tablerow = ""
                             + "" + val.Id + ""
                             + "" + val.Name + ""
                             + "" + val.Address + ""
                             + "" + val.City + ""
                             + "" + val.ZipCode + ""
                             + "";
            $("#tblbody").append(tablerow);
        });
    }

Mã đầy đủ

function GetBindemployeesData() {
            $.ajax({
                url: 'http://restapi.adequateshop.com/api/Metadata/GetEmployees',
                method: 'GET',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    //after successfully call bind data to Table
                    if (result && result.length > 0)
                    {
                        jQuery.each(result, function (i, val) {
                            var tablerow = ""
                                + "" + val.Id + ""
                                + "" + val.Name + ""
                                + "" + val.Address + ""
                                + "" + val.City + ""
                                + "" + val.ZipCode + ""
                                + "";
                            $("#tblbody").append(tablerow);
                        });
                    }
                },
                fail: function (jqXHR, textStatus) {
                    alert("Request failed: " + textStatus);
                }
            })
        }

đầu ra

* nếu bạn có một câu hỏi xin vui lòng bình luận

Nếu bạn muốn hiểu đúng về Đối tượng bị trì hoãn để khi chúng ta sử dụng các Đối tượng bị trì hoãn này và Phương thức của chúng cho các Chức năng AJAX, thì chúng ta có thể hiểu rõ hơn về cách đối tượng bị Trì hoãn bên trong bằng Chức năng AJAX. Lời hứa và đối tượng hoãn lại

Nhiều lần trong quá trình lập trình, một tình huống như vậy phát sinh là sau khi một hàm được thực thi đầy đủ, hàm tạo ra kết quả, một lệnh gọi hàm thứ hai được thực hiện để sử dụng kết quả đó

Và kết quả tạo ra sau khi chức năng thứ hai này được thực thi đầy đủ, kết quả đó phải được sử dụng trong chức năng thứ ba và quá trình này có thể tiếp tục hơn nữa

Nghĩa là, hàm thứ ba không thể được thực thi cho đến khi hàm thứ hai được thực thi và tạo ra kết quả và hàm thứ hai không thể được thực thi cho đến khi hàm thứ nhất được thực thi và tạo ra kết quả. Để đáp ứng loại nhu cầu này, chúng ta thường phải tạo một chức năng bằng cách lồng nó lên nhiều cấp độ

Deferred Object đưa ra giải pháp cho vấn đề này. Đối tượng Trì hoãn cung cấp phương tiện để viết các mã như vậy, mã này không được thực thi chính xác tại cùng thời điểm và địa điểm mà chúng được viết, nhưng chúng được thực thi trong tương lai khi chúng phù hợp với bất kỳ tình huống cụ thể nào khác. Hãy để chúng tôi cố gắng hiểu Quá trình xử lý các đối tượng bị trì hoãn bằng một ví dụ

Giả sử bạn nộp đơn xin việc ở công ty XYZ và bạn được công ty mời phỏng vấn. Bây giờ Công ty XYZ là chức năng mà bạn phải thực hiện

Cuộc phỏng vấn bạn sẽ thực hiện trong công ty này sẽ là kết quả của cuộc phỏng vấn đó và kết quả là bạn sẽ nhận được việc làm trong công ty này hoặc bạn sẽ không nhận được công việc

Đối với cả hai loại kết quả này, bạn tạo một kế hoạch vì đối với cả hai loại kết quả, bạn phải lập một số kế hoạch và bạn không thể quyết định các kế hoạch này sau khi cuộc phỏng vấn được thực hiện

Tức là trước khi phỏng vấn, bạn phải quyết định rằng nếu bạn xin được việc thì bạn sẽ làm gì và nếu bạn không xin được việc ở công ty này thì bạn sẽ làm gì.

Ví dụ, nếu bạn đã có một công việc, thì bạn phải xem sự sắp xếp cuộc sống ở thành phố nơi bạn sẽ cư trú, cho đến khi bạn muốn làm một công việc trong công ty đó. Trong khi nếu bạn không xin được việc làm, thì trong trường hợp đó bạn sẽ phải đặt vé để trở về quê hương của mình. Hoặc một số công việc tương tự khác có thể phải được lên kế hoạch

Bài đăng [Cách tốt nhất]-Cách hiển thị dữ liệu JSON trong HTML bằng Ajax xuất hiện đầu tiên trên Phát triển phần mềm. Hướng dẫn lập trình

Làm cách nào để hiển thị dữ liệu JSON trong HTML bằng AJAX trong MVC?

Làm cách nào để lấy dữ liệu từ JSON trong cuộc gọi AJAX?

Làm cách nào để hiển thị dữ liệu JSON trong HTML?

Làm cách nào để in đối tượng JSON trong phản hồi AJAX?