web界面初识jquery-CSDN博客

本文链接：https://blog.csdn.net/diandianyangyi/article/details/51017908

本文介绍了一种利用jQuery和XML文件实现网页中英文快速切换的方法。通过加载XML文件并解析其中的语言标签，可以轻松替换页面上的文本内容。此方案适用于需要支持多语言的网页应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web界面完成中英文切换，主要是使用jquery+xml来实现。

切换的代码如下

function change_lang()
{
	var lang = 2;
	if(lang==2)
	{
		var xmlDoc=null;    
		//支持IE浏览器  
		if(window.ActiveXObject){
		xmlDoc=new ActiveXObject("Microsoft.XMLDOM");   
		}  
		//支持Mozilla浏览器  
		else if(document.implementation && document.implementation.createDocument){  
		xmlDoc = document.implementation.createDocument('','',null);  
		}  
		else{  
		alert("not support");
		return;
		}
		
		if(xmlDoc!=null){  
		xmlDoc.async = false;  
		xmlDoc.load("xml/network-set.xml");  	
		}
		//解析  
		
		 var elements = xmlDoc.getElementsByTagName('zn');
	 	

		
	 	$(xmlDoc).find('zn').find('log_in').each(function(){ 
		alert("done");
		$("#m_network").text($( this ).children('m_network').text());
		$("#m_advance").text($( this ).children('m_advance').text());
		$("#m_about").text($( this ).children('m_about').text());
		$("#m_productSet").text($( this ).children('m_productSet').text());
		$("#m_quit").text($( this ).children('m_quit').text());
		$("#net_setting").text($( this ).children('net_setting').text());
		$("#net_dhcp").text($( this ).children('net_dhcp').text());
		$("#net_dhcp_on").text($( this ).children('net_dhcp_on').text());
		$("#net_dhcp_off").text($( this ).children('net_dhcp_off').text());
		$("#net_eth_interface").text($( this ).children('net_eth_interface').text());
		$("#net_ip_address").text($( this ).children('net_ip_address').text());
		$("#net_network_mask").text($( this ).children('net_network_mask').text());
		$("#net_gateway").text($( this ).children('net_gateway').text());
		$("#net_dns1_adress").text($( this ).children('net_dns1_adress').text());
		$("#net_cmi_port").text($( this ).children('net_cmi_port').text());
		$("#net_dns2_adress").text($( this ).children('net_dns2_adress').text());
		$("#net_ntp_setting").text($( this ).children('net_ntp_setting').text());
		$("#net_ntp_enable").text($( this ).children('net_ntp_enable').text());
		$("#net_ntp_server").text($( this ).children('net_ntp_server').text());
  		$("#net_time_zone").text($( this ).children('net_time_zone').text());
		$("#net_time_interval").text($( this ).children('net_time_interval').text());
		$("#save").val($( this ).children('save').text());
		$("#reset").val($( this ).children('cancel').text());
	 	});
		en_lang=true;
	}
}

也有对应的xml文件

<?xml version="1.0" encoding='gb2312' ?>
<zn>
    <log_in>
    <m_videoin>Video Input</m_videoin>
    <m_videoout>Video Output</m_videoout>
    <m_encode>encode Setting</m_encode>
    <m_streamSender>Streams Sender</m_streamSender>
     <m_network>NetWork</m_network>
  <m_advance>Advanced</m_advance>
  <m_about>About</m_about>
  <m_productSet>Product Setting</m_productSet>
  <m_quit>Quit</m_quit>

  <net_setting>NetWork Setting</net_setting>
  <net_dhcp>DHCP:</net_dhcp>
  <net_dhcp_on>On</net_dhcp_on>
  <net_dhcp_off>Off</net_dhcp_off>
  <net_eth_interface>ETH Interface</net_eth_interface>
  <net_ip_address>IPV4 Address:</net_ip_address>
  <net_network_mask>Network Mask:</net_network_mask>
  <net_gateway>GateWay:</net_gateway>
  <net_dns1_adress>DNS1 Address:</net_dns1_adress>
  <net_cmi_port>CMI Port:</net_cmi_port>
  <net_dns2_adress>DNS2 Address:</net_dns2_adress>


  <net_ntp_setting>NTP Param:</net_ntp_setting>
  <net_ntp_enable>NTP Enable:</net_ntp_enable>
  <net_ntp_server>NTP Server Address:</net_ntp_server>

  <net_time_zone>Time Zone:</net_time_zone>
  <net_time_interval>Time Interval:</net_time_interval>
  <save>Save</save>
  <cancel>Cancel</cancel>
    </log_in>
</zn>

这样就可以见界面上的中文置换为英文了。

1. 注意xml文件标签的匹配，若是不匹配则失效。检查这个问题花费了好多时间才搞定。。。。