Hướng dẫn how display xml data in html using jquery? - làm thế nào để hiển thị dữ liệu xml trong html bằng cách sử dụng jquery?

Tôi đang cố gắng hiển thị dữ liệu từ một tệp XML bằng cách sử dụng jQuery và mặc dù tôi có lượng dữ liệu chính xác mà nó đang lặp lại. JS:

    $(function(){var xml = '  ';

    var xmlDoc = $.parseXML( xml ); 

    var $xml = $(xmlDoc);
    var $match = $xml.find("match");
    var $odds = $match.find("choice");

    var game = $match.attr('name'),
        odd = $odds.attr('odd');

    $("#title").append(game);
    $odds.each(function(){
        $("#odds" ).append('
' +odd+ '
');

    });
});

Bạn có thể thấy điều này ở đây:

http://jsfiddle.net/6XcHW/

Bất kỳ đề xuất nào cũng rất hữu ích Tôi cũng muốn dữ liệu này (sẽ là tệp XML bên ngoài) được kiểm tra cứ sau 30 giây bằng AJAX.

hỏi ngày 8 tháng 2 năm 2014 lúc 11:14Feb 8, 2014 at 11:14

Về câu hỏi đầu tiên của bạn:

http://jsfiddle.net/6XcHW/3/

$(function(){
var xml = '   ';

    //Parse the givn XML
var xmlDoc = $.parseXML( xml ); 

var $xml = $(xmlDoc);
    var $match = $xml.find("match");
    var $odds = $match.find("choice");



    var game = $match.attr('name');


    $("#title").append(game);
            $odds.each(function(){
                odd = $(this).attr('odd');

    $("#odds" ).append('
' +odd+ '
');

    });
});

Vì vậy, VAR lẻ được tạo ra 'trên con ruồi', vòng bên trong, và sau đó không có sự lặp lại (trong mã của bạn, chỉ là trận đấu đầu tiên được lặp lại).

Đã trả lời ngày 8 tháng 2 năm 2014 lúc 11:27Feb 8, 2014 at 11:27

sinisakesinisakesinisake

11.1k2 Huy hiệu vàng18 Huy hiệu bạc27 Huy hiệu đồng2 gold badges18 silver badges27 bronze badges

2

Vấn đề là bạn có mỗi đối tượng nhưng không phải là giá trị trong thuộc tính, mã sẽ thích điều này

$odds.each(function(){
    $("#odds" ).append('
' + $(this).attr('odd') + '
');  
});

Hi vọng điêu nay co ich :)

Đã trả lời ngày 8 tháng 2 năm 2014 lúc 11:30Feb 8, 2014 at 11:30

Chúng ta đều biết rằng phương thức tải jQuery có thể được sử dụng để đọc tệp XML, nhưng các nhà phát triển thường hỏi làm thế nào để hiển thị tệp XML này lên bảng HTML. Do đó, tôi quyết định viết một hướng dẫn chi tiết sẽ:jQuery Load method can be used to read an XML file, but developers often ask how to display this XML file to a HTML table. Therefore I decided to write a detailed tutorial that will:

• Tải một tệp XML bằng phương thức tải jQuery.XML file using jQuery Load Method.
• Hiển thị nó trong một bảng HTML.HTML table.
• Bảng HTML có hệ thống phân trang.HTML table has pagination system.
• Do hệ thống phân trang này, dữ liệu XML sẽ được hiển thị theo từng trang.
• Toàn bộ điều này sẽ được dựa trên Ajax.AJAX.

XML để đọc với phương thức tải jQuery

Lưu ý: Phương thức đọc XML mà tôi sẽ sử dụng sẽ hỗ trợ bất kỳ tệp XML nào với bất kỳ định dạng nào.XML file with any format.

Trong ví dụ này, tôi đang lấy một tệp XML chứa chi tiết 25 sản phẩm.XML file that contains detail of 25 products.

Tệp XML này được đưa ra dưới đây:XML file is given below:

  
    77
    Original Frankfurter grüne Soße
    12
    2
    12 boxes
    13.0000
    32
    0
    15
    false
  
  
    76
    Lakkalikööri
    23
    1
    500 ml
    18.0000
    57
    0
    20
    false
  
  
    75
    Rhönbräu Klosterbier
    12
    1
    24 - 0.5 l bottles
    7.7500
    125
    0
    25
    false
  
  
    74
    Longlife Tofu
    4
    7
    5 kg pkg.
    10.0000
    4
    20
    5
    false
  
  
    73
    Röd Kaviar
    17
    8
    24 - 150 g jars
    15.0000
    101
    0
    5
    false
  
  
    72
    Mozzarella di Giovanni
    14
    4
    24 - 200 g pkgs.
    34.8000
    14
    0
    0
    false
  
  
    71
    Flotemysost
    15
    4
    10 - 500 g pkgs.
    21.5000
    26
    0
    0
    false
  
  
    70
    Outback Lager
    7
    1
    24 - 355 ml bottles
    15.0000
    15
    10
    30
    false
  
  
    69
    Gudbrandsdalsost
    15
    4
    10 kg pkg.
    36.0000
    26
    0
    15
    false
  
  
    68
    Scottish Longbreads
    8
    3
    10 boxes x 8 pieces
    12.5000
    6
    10
    15
    false
  
  
    67
    Laughing Lumberjack Lager
    16
    1
    24 - 12 oz bottles
    14.0000
    52
    0
    10
    false
  
  
    66
    Louisiana Hot Spiced Okra
    2
    2
    24 - 8 oz jars
    17.0000
    4
    100
    20
    false
  
  
    65
    Louisiana Fiery Hot Pepper Sauce
    2
    2
    32 - 8 oz bottles
    21.0500
    76
    0
    0
    false
  
  
    64
    Wimmers gute Semmelknödel
    12
    5
    20 bags x 4 pieces
    33.2500
    22
    80
    30
    false
  
  
    63
    Vegie-spread
    7
    2
    15 - 625 g jars
    43.9000
    24
    0
    5
    false
  
  
    62
    Tarte au sucre
    29
    3
    48 pies
    49.3000
    17
    0
    0
    false
  
  
    61
    Sirop d'érable
    29
    2
    24 - 500 ml bottles
    28.5000
    113
    0
    25
    false
  
  
    60
    Camembert Pierrot
    28
    4
    15 - 300 g rounds
    34.0000
    19
    0
    0
    false
  
  
    59
    Raclette Courdavault
    28
    4
    5 kg pkg.
    55.0000
    79
    0
    0
    false
  
  
    58
    Escargots de Bourgogne
    27
    8
    24 pieces
    13.2500
    62
    0
    20
    false
  
  
    57
    Ravioli Angelo
    26
    5
    24 - 250 g pkgs.
    19.5000
    36
    0
    20
    false
  
  
    56
    Gnocchi di nonna Alice
    26
    5
    24 - 250 g pkgs.
    38.0000
    21
    10
    30
    false
  
  
    55
    Pâté chinois
    25
    6
    24 boxes x 2 pies
    24.0000
    115
    0
    20
    false
  
  
    54
    Tourtière
    25
    6
    16 pies
    7.4500
    21
    0
    10
    false
  
  
    53
    Perth Pasties
    24
    6
    48 pieces
    32.8000
    0
    0
    0
    true
  
  
    77
  

Tôi cũng sẽ đề nghị bạn xem xét hướng dẫn tải jquery để hiểu nó cú pháp và triển khai.jQuery Load tutorial to understand it’s syntax and implementation.

Bây giờ chúng ta bắt đầu xây dựng các mã.

Trang HTML

Ở đây tôi sẽ đọc tệp XML từ trang HTML bằng phương thức jQuery .load ().XML file from the HTML page using jQuery .load() method.

Bạn có thể sử dụng bất kỳ trang web nào cho vấn đề (.aspx, .cshtml, .php, v.v.)..aspx, .cshtml, .php, etc).

Thêm các điều khiển sau trong trang của bạn:

Try

• Khi nhấp vào LOADBUTTON, tệp XML sẽ được đọc và hiển thị bên trong tempdiv.loadButton click, the XML file will be read and shown inside the tempDiv.
• Sau đó, tôi sẽ chuyển đổi nội dung của TEMPDIV thành bảng HTML và hiển thị nó bên trong resultdiv.tempDiv to HTML Table and shown it inside the resultDiv.
• PagingDiv sẽ chứa các liên kết trang để điều hướng từ trang này sang trang khác.pagingDiv will contain the page links for navigation from one page to another.
• LoadingIMG sẽ hiển thị hình ảnh tải trong cuộc gọi AJAX.loadingImg will show a loading image during AJAX call.

Cũng thêm các CSS sau vào trang của bạn

Mã jQuery

Bây giờ chuyển sang mã jQuery nơi việc đọc và chuyển đổi sẽ diễn ra. Vì vậy, trong trang của bạn, thêm các dòng mã sau:jQuery code where the reading and converting will take place. So in your page add the following lines of code:

Explanation::

• Sự kiện nhấp vào nút đầu tiên tải tệp XML và hiển thị bên trong TempDiv. Div này vẫn ẩn tất cả các thời gian.click event of the button first loads the XML file and shows it inside the tempDiv. This div remains hidden all the time.
• Bên trong chức năng gọi lại, tôi kiểm tra xem trạng thái không phải là lỗi. Sau đó, tôi đang ẩn hình ảnh tải và gọi hàm displayXml ().Callback function I check if status is not error. Then I am hiding the loading image and calling the DisplayXML() Function.

DisplayXml () hàm

Hàm này là bộ não của mã của tôi thực hiện chuyển đổi XML sang HTML và sau đó hiển thị nó. Nó lấy Pageno làm tham số của nó vì nó hiển thị XML trong từng trang.XML to HTML conversion and then displays it. It takes pageNo as its parameter because it shows the XML in page by page manner.

Tôi lặp qua tất cả các nút của tệp XML và nối chúng vào bảng. Việc nối tiếp được thực hiện thông qua phương pháp nối JQuery.table. The appending is done through jQuery Append method.

Hàm Paging () tạo các liên kết phân trang bằng cách sử dụng JQuery Pagination và giúp người dùng đọc XML theo từng trang.

Tải xuống các mã bằng liên kết dưới đây:

TẢI XUỐNG

Làm cách nào để xem tệp XML trong HTML?

JQuery HTML có hoạt động cho XML không?

Làm thế nào để bạn hiển thị XML trên một trang web?

Làm thế nào bao gồm tệp XML trong HTML?