AJAXを使用してHTMLで選択ボックスにデータを入力

単純なhtml5ページを作成しようとしています。ページがロードされると、Select HTML5オブジェクトにはXMLに格納され、 javascriptファイル。AJAXを使用してHTMLで選択ボックスにデータを入力

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="jquery.js" type="text/javascript"></script> 
     <script src="js/main.js" type="text/javascript" charset="utf-8"></script> 
    </head> 
    <body onLoad="javascript:loadXML()"> 
     <header> 
      <h1></h1> 
     </header> 
     <form name="myForm" method="GET" action=""> 
      <select id="cbLDAP"></select> 
     </form> 
     </div> 
    </body> 
</html>

JS：

// variables declaration 
var XML_PATH = "XML/ou.xml"; 
var select = $('#cdLDAP'); 
// load XML file 
function loadXML() 
{ 
    $.ajax({ 
      type: "GET", 
      url: XML_PATH, 
      dataType: "xml", 
      success: function(xml) 
      { 
       $(xml).find('LDAP').each(function() 
       { 
        var ou = $(this).find('OU').text(); 
        select.append("<option/><option class='ddheader'>"+ou+"</option>"); 
       }); 
       $(this).find('Name').each(function(){ 
        var name = $(this).text(); 
        select.append("<option class='ddindent' value='"+ name +"'>"+name+"</option>"); 
       }); 
      } 
    }); 
}

XML：私は、Firefox 11での私のhtmlファイルをロードすると

<?xml version= "1.0" encoding="UTF-8"?> 
<DropDown> 
    <LDAP> 
     <OU>1</OU> 
     <OU>2</OU> 
     <OU>3</OU> 
     <OU>4</OU> 
     <OU>5</OU> 
     <OU>6</OU> 
    </LDAP> 
</DropDown>

、選択したオブジェクトが移入されません。私は間違って何をしていますか？ありがとうございました。

出典

2012-04-03 cquadrini

SELECT要素のIDとjQueryの追加コードの間にタイプミスがあります。また、子の「OU」ノードではなく、テキスト値を持たない親ノードを反復処理していました。

ここでのXML構文解析を修正し、いくつか間違って名前の要素IDクリーンアップし、いくつかのサンプルコードです：

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script> 
</head> 
<body> 
    <header> 
     <h1></h1> 
    </header> 
    <form name="myForm" method="GET" action=""> 
     <select id="cdLDAP"> 
     <option/> 
     </select> 
    </form> 
    </div> 
    <script type="text/javascript"> 
    // variables declaration 
    var XML_PATH = "XML/ou.xml"; 
    // load XML file 
    $(function() { 
     $.ajax({ 
     type: "GET", 
     url: XML_PATH, 
     dataType: "xml", 
     success: function(xml) { 
      $(xml).find('LDAP').find('OU').each(function(i) { 
      var ou = $(this).text(); 
      $('#cdLDAP').append("<option class='ddheader'>"+ou+"</option>"); 
      }); 
      $(this).find('Name').each(function() { 
      var name = $(this).text(); 
      $('#cdLDAP').append("<option class='ddindent' value='"+ name +"'>"+name+"</option>"); 
      }); 
     } 
     }); 
    });  
    </script> 
</body>  
</html>

最後に、オンロードアクションと機能に解析コードをラップは本当にないことは注目にその価値がjQueryで必要です。クライアント側のコードをXMLファイルと同じサーバーに配置することを忘れないでください。そうしないと、XMLデータのAJAXフェッチをブロックする同じ起点ポリシーが実行されます。

出典

2012-04-03 16:40:59 bcmoney

とはなんですか？ ... セクションの中にありますか？また、なぜ別のファイルからjavascriptを取り出してhtmlファイルに配置したのですか？ベストプラクティスを理解することは、すべてのCSSファイルを1つの場所に、jsファイルを別の場所に配置することなどです。これは悪い習慣ですか？ – cquadrini

セクションにjQueryを追加しました。jQuery CDNから最新のバージョンのみを読み込んでいます。 CDNから静的ファイルをロードする方が効率的ですが、実際にはこれを実行してスクリプトをインライン化して、これを自己完結型で簡単に実行可能なプロトタイプにしました。インラインスクリプトは迅速な開発には便利ですが、最終的な製品で使用することはお勧めしませんが、通常は単一のJSファイルからすべてのクライアントサイドコードをロードする方が効率的ですページの読み込みに必要なHTTP GETリクエストを減らすため）。 – bcmoney

これはうまくいきます。あなたは確かにチェックを受けていますが、私はまだ2つの質問があります。 1）scriptタグの中の "head"セクションの情報は何ですか？ 2）外部ファイルを使用するには、第2のタグを 'code ' – cquadrini

AJAXを使用してHTMLで選択ボックスにデータを入力

答えて

関連する問題