연결된 드롭다운 상자 코드 예제를 생성하기 위해 XML을 호출하는 Javascript에 대한 자세한 설명-XML/RSS 튜토리얼-php.cn

집

백엔드 개발

XML/RSS 튜토리얼

연결된 드롭다운 상자 코드 예제를 생성하기 위해 XML을 호출하는 Javascript에 대한 자세한 설명

黄舟

Mar 07, 2017 pm 04:29 PM

기존 HTML 페이지에서 드롭다운 상자를 연결하는 데는 두 가지 방법이 사용됩니다.
1) 드롭다운 상자의 내용을 HTML의 JavaScript로 직접 하드코딩하고 Javascript 함수를 호출하여 드롭에 씁니다. - 루프의 다운 상자. 이 방법은 드롭다운 상자의 내용이 자주 변경되는 상황에는 적합하지 않습니다. 데이터 소스와 JavaScript 프로그램이 같은 페이지에 작성되기 때문입니다.

<html>
<head>
<title>List</title>
<meta http-equiv="Content-Type" content="text/html; c
harset=gb2312">
<script LANGUAGE="javascript">
<!--
var onecount;
onecount=0;
subcat = new Array();
subcat[0] = new Array("徐汇区","01","001");
subcat[1] = new Array("嘉定区","01","002");
subcat[2] = new Array("黄浦区","01","003");
subcat[3] = new Array("南昌市","02","004");
subcat[4] = new Array("九江市","02","005");
subcat[5] = new Array("上饶市","02","006");
onecount=6;
function changelocation(locationid)
{
document.myform.smalllocation.length = 0;
var locationid=locationid;
var i;
document.myform.smalllocation.options[0] = new Option(&#39;====所有地区====&#39;,&#39;&#39;);
for (i=0;i <onecount; i++)
{
if (subcat[i][1] == locationid)
{
document.myform.smalllocation.options[document.myform.smalllocation.length]
= new Option(subcat[i][0], subcat[i][2]);
}
}
}
//-->
</script>
</head>
<body>
<form name="myform" method="post">
<select name="biglocation"
onChange="changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value)">
<option value="01" selected>上海</option>
<option value="02">江西</option>
</select>
<select name="smalllocation">
<option selected value="">==所有地区==</option>
</select>
</form>
<script LANGUAGE="javascript">
<!--
changelocation(document.myform.biglocation.options[document.myform.biglocation.selectedIndex].value);
//-->
</script>
</body>
</html>

2) JavaScript는 데이터베이스를 직접 읽고 데이터베이스의 레코드를 가져와서 JavaScript에 쓴 다음 첫 번째 방법과 마찬가지로 JavaScript 함수를 호출하여 루프의 드롭다운 상자에 씁니다. . 이 방법은 데이터 소스를 JavaScript에서 분리하지만 데이터베이스 연결을 노출하는 것은 보안 관점에서 실용적인 가치가 거의 없습니다.

나의 방법은 xml 파일의 드롭다운 상자에 데이터를 넣고 자바스크립트를 사용하여 XML 파일을 읽고 드롭다운 상자에 내용을 가져오는 것입니다.

HTML 파일은 다음과 같습니다.

<!-- myfile.html -->
<html>
<head>
<script language="JavaScript" for="window" event="onload">
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var i=0;
var j=0;
var subclass_name="";
loadXML();
function loadXML(){
xmlDoc.async="false";
xmlDoc.load("account.xml");
xmlObj=xmlDoc.documentElement; 
nodes = xmlDoc.documentElement.childNodes;
document.frm.mainclass.options.length = 0; 
document.frm.subclass.options.length = 0;
for (i=0;i<xmlObj.childNodes.length;i++){
labels=xmlObj.childNodes(i).getAttribute("display_name");
values=xmlObj.childNodes(i).text;
document.frm.mainclass.add(document.createElement("OPTION"));
document.frm.mainclass.options[i].text=labels; 
document.frm.mainclass.options[i].value=values;
}
}

</script>
<script language="JavaScript" >
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var i=0;
var j=0;
function deleteOption() {
    
}
function setsubclass(main){
var is_selected="N";
if (document.frm.subclass.options.length!=0) { 
for (i=0;i<=document.frm.subclass.options.length;i++)
document.frm.subclass.options[i]=null ;
}
//重复才有效
if (document.frm.subclass.options.length!=0) { 
for (i=0;i<=document.frm.subclass.options.length;i++){
document.frm.subclass.options[i]=null ;
document.frm.subclass.options.remove(i);
}
}

for (i=0;i<xmlObj.childNodes.length;i++){
var values="";
var lables="";
if (is_selected=="Y") return;
labels=xmlObj.childNodes(i).getAttribute("display_name");
values=xmlObj.childNodes(i).text;
//alert(labels+ " | "+main);
if (labels==main){
is_selected="Y";
for (j=0;j<xmlObj.childNodes(i).childNodes.length;j++){
//subclass_name="document.frm.subclass";
labels=xmlObj.childNodes(i).childNodes(j).getAttribute("display_name");
values=xmlObj.childNodes(i).childNodes(j).text;
//alert(values); 
document.frm.subclass.add(document.createElement("OPTION"));
document.frm.subclass.options[j].text=labels; 
document.frm.subclass.options[j].value=values;
}
}
}
}
</script>
<title>在HTML中调用XML数据</title>
</head>
<body bgcolor="#FFFFFF">
<FORM NAME="frm"> 
类型<SELECT NAME="mainclass" OnChange=&#39;setsubclass(this[selectedIndex].text)&#39;></SELECT>
<option selected value=""  ></option>
子类<SELECT NAME="subclass"></SELECT>
</form>
</body>
</html>
account.xml 如下：

<?xml version="1.0" encoding="GB2312"?>
<item>
<class display_name="未选定">
<subclass display_name="">Not Available</subclass> 
</class>
<class display_name="95788主叫卡">
<subclass display_name="1152069589-1152069638">dangdang1</subclass> 
<subclass display_name="1152081031-1152081080">dangdang2</subclass>
<subclass display_name="1152547201-1105254750">dangdang3</subclass>
<subclass display_name="1152548401-1152548700">dangdang4</subclass>
<subclass display_name="1152548701-1152549000">dangdang5</subclass>
<subclass display_name="1156000001-1156010000">dangdang6</subclass>
</class>
<class display_name="网上注册">
<subclass display_name="1152000001-1152001000">zhuce_user1</subclass> 
<subclass display_name="1151001000-1151005000">zhuce_user2</subclass>
</class>
<class display_name="通讯">
<subclass display_name="1156030001-1156080000">tongxun</subclass> 
</class>
</item>

이 방법은 자바스크립트 프로그램에서 데이터 소스를 분리하여 자주 변경되는 데이터 소스에 적합합니다. xmlDoc.load에서는 URL 매개변수를 직접 호출하고 원격 XML을 읽어 느슨한 결합을 달성할 수 있습니다. 위의 응용 프로그램은 IE6.0에서 통과됩니다. 단점은 드롭다운 상자 목록의 내용을 제거할 때
삭제 작업을 반복해야 한다는 것입니다. 그렇지 않으면 명백한 버그가 있을 수 있으므로 일부 독자들이 수정해 주시길 바랍니다.

위 내용은 Javascript에서 XML을 호출하여 링크된 드롭다운 박스 코드 생성에 대한 자세한 설명입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

Beyond Basic : XML이 활성화 한 고급 RSS 기능May 07, 2025 am 12:12 AM

RSS를 사용하면 멀티미디어 컨텐츠 임베딩, 조건부 가입 및 성능 및 보안 최적화가 가능합니다. 1) 태그를 통해 오디오 및 비디오와 같은 멀티미디어 컨텐츠를 포함합니다. 2) XML 네임 스페이스를 사용하여 조건부 가입을 구현하여 구독자가 특정 조건에 따라 컨텐츠를 필터링 할 수 있습니다. 3) CDATA 섹션 및 XMLSCHEMA를 통해 RSSFEED의 성능 및 보안을 최적화하여 표준에 대한 안정성과 준수를 보장합니다.

RSS 디코딩 : 웹 개발자를위한 XML 프라이머May 06, 2025 am 12:05 AM

RSS는 자주 업데이트되는 데이터를 게시하는 데 사용되는 XML 기반 형식입니다. 웹 개발자로서 RSS를 이해하면 콘텐츠 집계 및 자동화 업데이트 기능을 향상시킬 수 있습니다. RSS 구조, 구문 분석 및 생성 방법을 학습하면 RSSFeeds를 자신있게 처리하고 웹 개발 기술을 최적화 할 수 있습니다.

JSON 대 XML : RSS가 XML을 선택한 이유May 05, 2025 am 12:01 AM

RSS는 다음과 같이 JSON 대신 XML을 선택했습니다. 1) XML의 구조 및 검증 기능은 JSON보다 낫습니다. 이는 RSS 복잡한 데이터 구조의 요구에 적합합니다. 2) XML은 당시 광범위하게 지원되었다. 3) RSS의 초기 버전은 XML을 기반으로했으며 표준이되었습니다.

RSS : XML 기반 형식이 설명되었습니다May 04, 2025 am 12:05 AM

RSS는 자주 업데이트되는 컨텐츠를 구독하고 읽는 데 사용되는 XML 기반 형식입니다. 작업 원칙에는 생성과 소비, RSS 리더 사용을 사용하면 정보를 효율적으로 얻을 수 있습니다.

RSS 문서 내부 : 필수 XML 태그 및 속성May 03, 2025 am 12:12 AM

RSS 문서의 핵심 구조에는 XML 태그 및 속성이 포함됩니다. 특정 구문 분석 및 생성 단계는 다음과 같습니다. 1. XML 파일, 프로세스 및 태그 읽기. 2. 추출 ,, 등을 태그 정보. 3. 버전 호환성을 보장하기 위해 사용자 정의 태그 및 속성을 처리하십시오. 4. 캐시 및 비동기 처리를 사용하여 성능을 최적화하여 코드 가독성을 보장하십시오.

JSON, XML 및 데이터 형식 : RSS 비교May 02, 2025 am 12:20 AM

JSON, XML 및 RSS의 주요 차이점은 구조와 2. XML은 엄격하지만 복잡한 구문 분석을 가진 복잡한 데이터 구조에 적합합니다. 3. RSS는 XML을 기반으로하며 컨텐츠 릴리스, 표준화되었지만 제한된 사용에 사용됩니다.

XML/RSS 피드 문제 해결 : 일반적인 함정 및 전문가 솔루션May 01, 2025 am 12:07 AM

XML/RSS 피드의 처리에는 구문 분석 및 최적화가 포함되며 일반적인 문제에는 형식 오류, 인코딩 문제 및 누락 된 요소가 포함됩니다. 솔루션은 다음과 같습니다. 1. XML 검증 도구를 사용하여 형식 오류를 확인하십시오. 2. 인코딩 일관성을 확인하고 Chardet 라이브러리를 사용하여 인코딩을 감지합니다. 3. 기본값을 사용하거나 요소가 누락 될 때 요소를 건너 뜁니다. 4. LXML 및 캐시 구문 분석 결과와 같은 효율적인 파서를 사용하여 성능을 최적화합니다. 5. XML 주입 공격을 방지하기 위해 데이터 일관성 및 보안에주의를 기울이십시오.

RSS 문서 디코딩 : 피드 읽기 및 해석Apr 30, 2025 am 12:02 AM

RSS 문서를 구문 분석하는 단계에는 다음이 포함됩니다. 1. XML 파일 읽기, 2. DOM 또는 SAX를 사용하여 XML을 구문 분석, 3. 제목, 링크 및 기타 정보 추출 및 4. 프로세스 데이터. RSS 문서는 RSS 리더 또는 데이터 처리 도구를 구축하는 데 적합한 업데이트 된 컨텐츠, 구조 및 요소를 게시하는 데 사용되는 XML 기반 형식입니다.

See all articles