XML ファイルを読み取るための jQuery 行レベルの解析 (ソース コードが添付されています)_jquery

WBOY
リリース: 2016-05-16 18:44:52
オリジナル
1009 人が閲覧しました

最近、あるプロジェクトに取り組んでいます。ページでは Cookie が使用されているため、ユーザーのブラウザが Cookie をサポートしているかどうかを確認し、ブラウザの Cookie 機能を有効にする方法をユーザーに表示する必要があります。同時に、プロジェクト全体を中国語、ベトナム語、日本語、英語などの多言語サポートで構成する必要があるため、言語構成ファイルが必要です。このプロジェクトでは、jQuery を使用して XML 言語構成ファイルを解析および読み取り、言語スケジューリングを実装します。これは、jQuery の XML ファイルを解析して読み取る機能のテスト ソース コードです。
ディレクトリ構造:
main.css ファイルコード:

コードをコピー コードは次のとおりです。

@CHARSET "UTF-8";
* {
マージン: 0px;
パディング: 0px;
ボディ {
幅: 800px;
テキスト整列: 左;
フォント サイズ: 62.5%;
フォント: 通常 0.75em タホマ、ヘルベチカ、サンセリフ
高さ:16px;
ラインの高さ:16px;
背景:#fcc url(image/msg_error.png) 繰り返しなし; 🎜>ボーダー -bottom:#faa 1px ソリッド;
パディング左:20px;
表示:なし;
#Message_success {
高さ:16px ;
line-height:16px;
color:#000;
margin-bottom:2px; -bottom: #afa 1px ソリッド;
overflow:hidden;
}

index.html ファイル コード:




コードをコピー


コードは次のとおりです。


head>

jQuery による XML ファイルの読み取り ;
< リンク rel="stylesheet" href="main.css" type="text/css"/>
;
< ;/html>

MsgConfig_zh.xml ファイル コード:




コードをコピー


コードは次のとおりです。



id="1" name="cookie -support">
お使いのブラウザは Cookie をサポートしていません。ブラウザの Cookie 機能を有効にしてください
Cookie を有効にする方法を表示する
index.html
jQuery はノード XML を正常に読み取りました browser.js ファイルコード:



コードをコピー


コードは次のとおりです:

$(document).ready(function() {
/* Check the browser if open Cookie support.
* ---------------- ------------------------------------- */
//navigator.cookieEnabled == true It means that the browser supports the Cookie function
// navigator.cookieEnabled == false means that the browser does not have the Cookie function enabled
// Because my browser has already enabled the Cookie function, setting it to true here is for detection Effect
if(navigator.cookieEnabled == true){
$.ajax({
url:"MsgConfig_zh.xml", //XML file relative path
type:"POST", // Method of sending request
dataType: "xml", //Specify the file type as "xml"
timeout:1000, //Timeout setting, unit is milliseconds
error:function(xml){ //Parse Handling of XML file errors
$("#Message_error").text("Error loading XML document (Error loading XML file)" xml);
$("#Message_error").show();
},
success:function(xml){
//Traverse Msg-Config, find the node "msg" and the node id=1
$(xml).find("Msg-Config> ;msg[id=1]").each(function(){
var Msg_value = $(this).find("message").text(); //Get the value of child node message
var Msg_help = $(this).find("message-help").text(); //Get the value of the child node message-help
var Msg_url = $(this).find("message-url"). text(); //Get the value of the child node message-url
//Add the obtained value to the page's layer Message_error in the .html() method after combining it
//Here, .html() is used method, it will process the html code in the text
//If you use the .text() method, the HTML code such as will be output to the page intact
$("#Message_error").html(Msg_value " "
" Msg_help "< /a>");
//The layer Message_error is originally hidden. After adding the value, it will be displayed
$("#Message_error").show();
});

//Traverse Msg-Config, find the node "msg" and the node id=2
$(xml).find("Msg-Config>msg[id=2 ]").each(function(){
var Msg_value = $(this).find("message").text(); //Get the value of child node message
$("#Message_success") .html(Msg_value); //Add the obtained value to the page's layer Message_error in the .html() method
$("#Message_success").show();
});
}
});
}
});

Final result display:


No need to say more, the code is marked with very detailed comments.

But during the test, I also encountered one or two problems. First of all, the encoding format of the XML file must be UTF-8, that is, must be ensured, otherwise garbled characters will appear. Because jQuery's Ajax transmission data is encoded in UTF-8.

The second issue is about the encoding of JS files. Logically speaking, Chinese characters should not appear in JS files. In the test, I added a test for Chinese, such as the code snippet $("#Message_error").text("Error loading XML document (error loading XML file)" xml);, which means that the XML cannot be parsed correctly or cannot be found. When testing the file, I found that the Chinese characters "Error loading XML file" were always displayed as garbled characters. It took me a long time to find out that it was a problem with the encoding of the JS file itself. After searching online for a long time, no one clearly explained the solution. Even if there was, it did not solve the root cause of the garbled code. Besides, most people were talking nonsense. In one post They go around and around and use it to harm others without even testing it themselves. Finally, I fumbled for more than an hour and finally solved the JS file encoding problem, and also solved the garbled problem of jQuery.html() function and jQuery.text() function when transmitting Chinese.

Regarding the solution to the garbled problem of jQuery.html() function and jQuery.text() function when transmitting Chinese, please pay attention to my other article "
JS file itself encoding conversion "
File package download

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート