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:
//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:
//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
#loadingImg {
display: none;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
table {
background-color: purple;
}
table tr th {
background-color: #CCC;
text-transform: capitalize;
}
#resultDiv {
overflow: auto;
}
#pagingDiv {
padding: 15px 0;
}
#pagingDiv .myDisableClass {
background-color: #4CAF50;
}
#pagingDiv .myClass {
background-color: #ebbebe;
}
#pagingDiv a, #pagingDiv span {
display: inline-block;
padding: 0px 9px;
margin-right: 4px;
border-radius: 3px;
border: solid 1px #c0c0c0;
background: #e9e9e9;
box-shadow: inset 0px 1px 0px rgba[255,255,255, .8], 0px 1px 3px rgba[0,0,0, .1];
font-size: .875em;
font-weight: bold;
text-decoration: none;
color: #717171;
text-shadow: 0px 1px 0px rgba[255,255,255, 1];
}
#pagingDiv a:hover {
cursor: pointer;
background: #fefefe;
background: -webkit-gradient[linear, 0% 0%, 0% 100%, from[#FEFEFE], to[#f0f0f0]];
background: -moz-linear-gradient[0% 0% 270deg,#FEFEFE, #f0f0f0];
}
#pagingDiv a.active {
border: none;
background: #616161;
box-shadow: inset 0px 0px 8px rgba[0,0,0, .5], 0px 1px 0px rgba[255,255,255, .8];
color: #f0f0f0;
text-shadow: 0px 0px 3px rgba[0,0,0, .5];
}
#pagingDiv span {
color: #f0f0f0;
background: #616161;
}
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:
$[document].ready[function [] {
$["#reset"].click[function [e] {
location.reload[];
}];
$["#loadButton"].click[function [e] {
$["#tempDiv"].load["products.xml", function [response, status, xhr] {
if [status != "error"] {
/*Hiding the loading image*/
$["#loadingImg"].hide[];
/*End*/
DisplayXML[1];
}
}];
/*Showing the loading image*/
$["#loadingImg"].show[];
/*End*/
}];
function DisplayXML[pageNo] {
var xmlDoc = $.parseXML[$["#tempDiv"].html[]];
var xml = $[xmlDoc];
var nodeName = xml.find["*"].eq[1][0].nodeName;
var nodes = xml.find[nodeName];
var pageSize = 5;
totalRecords = nodes.length;
/*Table Header*/
var table = $[""];
td.append[$[value].text[]];
tr.append[td];
}];
table.append[tr];
}
/*End*/
$["#resultDiv"].html[table];
/*Paging*/
var result = Paging[pageNo, 5, totalRecords, "myClass", "myDisableClass"];
$["#pagingDiv"].html[result]
/*Paging*/
}
$["#pagingDiv"].on["click", "a", function [] {
DisplayXML[$[this].attr["pn"]];
}];
function Paging[PageNumber, PageSize, TotalRecords, ClassName, DisableClassName] {
var ReturnValue = "";
var TotalPages = Math.ceil[TotalRecords / PageSize];
if [+PageNumber > 1] {
if [+PageNumber == 2]
ReturnValue = ReturnValue + "Previous ";
else {
ReturnValue = ReturnValue + "Previous ";
}
}
else
ReturnValue = ReturnValue + "Previous ";
if [[+PageNumber - 3] > 1]
ReturnValue = ReturnValue + "1 ..... | ";
for [var i = +PageNumber - 3; i = 1] {
if [+PageNumber != i] {
ReturnValue = ReturnValue + "" + i + " | ";
}
else {
ReturnValue = ReturnValue + "" + i + " | ";
}
}
for [var i = +PageNumber + 1; i Chủ Đề |