A recent project, because the page uses cookies, to determine whether the user's browser supports cookies, and prompts the user how to open the browser's cookie function. At the same time, the entire project is configured with multilanguage support, including Chinese, Vietnamese, Japanese, and English, so you must have a language profile. The project uses jquery parsing to read XML language configuration files to implement language scheduling. This is the jquery parse read XML file function test source, now take out to share.
Directory structure:
MAIN.CSS File Code:
Copy Code code as follows:
@CHARSET "UTF-8";
* {
margin:0px;
padding:0px;
}
Body {
width:800px;
Text-align:left;
font-size:62.5%;
Font:normal 0.75em Tahoma, Helvetica, Sans-serif;
}
#Message_error {
height:16px;
Color: #000;
line-height:16px;
Background: #fcc URL (image/msg_error.png) no-repeat;
margin-bottom:2px;
Border-bottom: #faa 1px solid;
padding-left:20px;
Overflow:hidden;
Display:none;
}
#Message_success {
height:16px;
line-height:16px;
Color: #000;
Background: #cfc URL (image/msg_success.png) no-repeat;
margin-bottom:2px;
Border-bottom: #afa 1px solid;
padding-left:20px;
Overflow:hidden;
Display:none;
}
index.html File Code:
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>jquery read XML file at line level </title>
<link rel= "stylesheet" href= "Main.css" href= "Main.css" type= "Text/css"/>
<script type= "Text/javascript" src= "Jquery-1.3.2.js" ></script>
<script type= "Text/javascript" src= "Browser.js" ><script>
<body>
<div id= "Message_success" ></div>
<div id= "Message_error" ></div>
</body>
Msgconfig_zh.xml File Code:
Copy Code code as follows:
<?xml version= "1.0" encoding= "Utf-8"?>
<Msg-Config>
<msg id= "1" name= "Cookie-support" >
<message> your browser does not support cookies, please open the browser's cookie function </message>
<message-help> Click to view open cookie method </message-help>
<message-url>index.html</message-url>
</msg>
<msg id= "2" name= "Load-xml" >
<message>jquery read node XML success </message>
</msg>
</Msg-Config>
Browser.js File Code:
Copy Code code as follows:
$ (document). Ready (function () {
/* Check The browser if open Cookie support.
* ----------------------------------------------------- */
Navigator.cookieenabled = = True means that the browser supports cookie functionality
Navigator.cookieenabled = = False when the browser does not have cookies enabled
Because my browser has the cookie feature turned on, this is set to true to detect effects
if (navigator.cookieenabled = = True) {
$.ajax ({
URL: "Msgconfig_zh.xml",//xml file relative path
Type: "POST",//How the request is sent
DataType: "xml",//indicates that the file type is "XML"
timeout:1000,//timeout setting, in milliseconds
Error:function (XML) {//parsing XML file when errors are handled
$ ("#Message_error"). Text "Error loading XML document (Error loading XML file)" +xml);
$ ("#Message_error"). Show ();
},
Success:function (XML) {
Traversing msg-config, looking for node "MSG" and node id=1 node
$ (XML). Find (' msg-config>msg[id=1] "). each (function () {
var Msg_value = $ (this). Find ("message"). Text (); Gets the value of the child node message
var msg_help = $ (this). Find ("Message-help"). Text (); Gets the value of the child node Message-help
var Msg_url = $ (this). Find ("Message-url"). Text (); Gets the value of the child node Message-url
Adds the obtained value to the layer Message_error of the page by combining the. HTML () method
This is the. HTML () method that handles the HTML code in the text
If you use the. Text () method, the HTML code such as <a><font color> will be output to the page
$ ("#Message_error"). HTML (msg_value+ "<font color= ' Blue ' ><b><a href=" "+msg_url+" "href=" "+msg_url+" " > "+msg_help+" </a></b></font>);
Layer Message_error was originally hidden and then added to the value to display
$ ("#Message_error"). Show ();
});
Traversing msg-config, looking for node "MSG" and node id=2 node
$ (XML). Find (' msg-config>msg[id=2] "). each (function () {
var Msg_value = $ (this). Find ("message"). Text (); Gets the value of the child node message
$ ("#Message_success"). HTML (msg_value); Adds the obtained value to the layer Message_error of the page in the. html () mode
$ ("#Message_success"). Show ();
});
}
});
}
});
Final results show:
Superfluous is needless to say, the code has a very detailed annotation.
But in the course of testing, I also encountered one or two problems. First, the XML file encoding format must be UTF-8, that is, to ensure that <?xml version= "1.0" encoding= "Utf-8" ", otherwise there will be garbled." Because the Ajax transfer data of jquery is encoded using UTF-8.
The second, is about the JS file encoding problem. According to the truth, JS file should not appear in Chinese. In the test I added a test for Chinese, such as code fragment $ ("#Message_error"). Text ("Error loading XML document (loading XML file)" +xml); , refers to when the XML file can not be correctly resolved or found the error message prompts, in the test when the "Load XML file Error" The old display of the characters are garbled. Get a long time to know is the JS file itself coding problem, in the online search for a half-day, and no one clearly explain the solution, even if there is no solution to the root of the garbled, and most people are in the nonsense, a post around, they have not tested to take out the harmful. Finally, I groped for one hours, finally solved the JS file encoding problem, and then solved the jquery.html () function and Jquery.text () function in the transmission of Chinese garbled problem.
about the jquery.html () function and the Jquery.text () function in the transmission of Chinese garbled problems please pay attention to my other article "JS file itself code conversion"
File packaging download
