Cách đọc tệp XML trong JavaScript
|
Trong bài viết này, tôi sẽ giải thích bằng một ví dụ, cách đọc, phân tích cú pháp và hiển thị tệp XML được chọn trong điều khiển FileUpload (Đầu vào tệp HTML) ở phía máy khách bằng JavaScript, jQuery và HTML5 Show HTML5 cho phép các nhà phát triển truy cập nội dung của các tệp XML và thông tin chi tiết bằng cách sử dụng JavaScript và jQuery và do đó trong các trình duyệt hỗ trợ HTML5, người ta có thể dễ dàng đọc nội dung tệp XML
Đánh dấu HTML Đánh dấu HTML bao gồm điều khiển FileUpload (Đầu vào tệp HTML) và Nút HTML <html xmlns="http. //www. w3. org/1999/xhtml"> <đầu> <tiêu đề>tiêu đề> <nội dung> <script type="text/javascript" . // ajax. googleapis. com/ajax/libs/jquery/1. 8. 3/jquery. tối thiểu. js"> src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">tập lệnh> <script type="text/javascript" $( hàm () { $( "#upload" ). bind( "click" , function () { var regex = /^([a-zA-Z0-9\s_\\. \-. ])+(. xml)$/; if (regex. kiểm tra($( "#fileUpload" ). giá trị(). toLowerCase())) { if ( typeof (FileReader). = "không xác định" ) { var reader = new FileReader();< người đọc. onload = hàm (e) { var xmlDoc = $. parseXML(e. Mục tiêu. kết quả); var customers = $(xmlDoc). find( "Khách hàng" );
//Tạo phần tử Bảng HTML. var table = $( """"""""); bảng[0]. đường viền = "1" ;
//Thêm hàng tiêu đề. var row = $(table[0]. insertRow(-1)); khách hàng. eq(0). những đứa trẻ(). mỗi( hàm () { var headerCell = $( """"""""); ô tiêu đề. html( này . tên nút); chèo thuyền. nối thêm (tiêu đềCell); });
//Thêm hàng dữ liệu. $(khách hàng). mỗi( hàm () { hàng = $(bảng[0]. insertRow(-1)); $( này ). những đứa trẻ(). mỗi( hàm () { var ô = $( """"""""); ô. html($( này ). văn bản()); chèo thuyền. nối thêm (ô); }); });
var dvTable = $( "#dvTable"); dvTable. html( "" ); dvTable. nối thêm (bảng); } người đọc. readAsText($( "#fileUpload" )[0]. tệp [0]); } else { cảnh báo( "Trình duyệt này không hỗ trợ HTML5. " ); } } else { cảnh báo( "Vui lòng tải lên một tệp XML hợp lệ. " ); } }); }); tập lệnh> <đầu vào loại="tệp" id="fileUpload" /> <đầu vào loại="nút" id="upload" value="Upload" /> <giờ /> <div id="dvTable">< div>
Giải trình Đọc tệp XML Tệp XML được chọn trong điều khiển FileUpload (Đầu vào tệp HTML) và nút Tải lên được nhấp. Trên sự kiện nhấp chuột của nút Tải lên, một chức năng JavaScript đang được gọi Bên trong hàm, trước tiên, kiểm tra được thực hiện để xác minh xem tệp là tệp XML hay tệp văn bản hợp lệ. Sau đó, kiểm tra được thực hiện để đảm bảo trình duyệt có hỗ trợ API tệp HTML5 hay không
Phân tích cú pháp XML Nội dung của tệp XML được đọc vào một tài liệu XML và sau đó là các nút cụ thể tôi. e. Khách hàng được đọc vào một đối tượng JavaScript
Thêm hàng tiêu đề Hàng Tiêu đề sẽ được tạo bằng cách sử dụng Nút đầu tiên của XML bằng cách lặp qua các Nút con và đọc tên của nó và từng phần tử của Bảng TH được tạo và nối vào hàng tiêu đề bằng cách sử dụng jQuery
Phương thức insertRow của bảng Phương thức này thêm một hàng mới vào Bảng tại chỉ mục đã chỉ định. Nếu chỉ mục được cung cấp là -1 thì hàng sẽ được thêm vào vị trí cuối cùng
Thêm hàng dữ liệu Một vòng lặp được thực thi trên các nút XML và từng Hàng một được tạo trong Bảng HTML. Sau đó, bên trong mỗi Hàng, một phần tử ô động được tạo và nối thêm bằng jQuery Làm cách nào để đọc dữ liệu từ tệp XML bằng JavaScript?Trong jQuery, nó sử dụng phương thức parseXML() để tạo một Tài liệu XML hợp lệ từ một chuỗi. Chúng ta có thể sử dụng phương thức find() để lấy dữ liệu dựa trên tên nút. . var strXML = '
tài liệu var = $. . $eventItem = $(doc). . $eventItem. . cảnh báo ("ID. " + yếu tố Làm cách nào để đọc tệp XML cục bộ trong js?//openFile sẽ đọc tệp XML và nhập nó vào trường văn bản var openFile = function(sự kiện) { đầu vào var = sự kiện. Mục tiêu; văn bản var = ""; đầu đọc var = FileReader mới(); var onload = function(sự kiện) { văn bản = người đọc. kết quả; parseFile(văn bản); Làm cách nào để nhập tệp XML trong JavaScript?bạn có thể nhập tệp bằng thẻ tập lệnh. var xml = tài liệu. getElementById("xml");
Làm cách nào để đọc chuỗi XML trong JavaScript?Phân tích cú pháp XML thành chuỗi . var text = " " " ""; trình phân tích cú pháp var = DOMParser mới(); var xmlDoc = trình phân tích cú pháp. parseFromString(văn bản, "văn bản/xml"); bảng điều khiển. nhật ký (xmlDoc); |
