0

XML からのデータを jquery フォームに入力しようとしています。XML にはフォームのドロップダウンに入力される ID があり、ID を選択すると他のフォーム フィールドに入力されます。ところで、私はPHPを使用しません

私のXML

<XMLReview>
<plan>
 <planNumber>773</planNumber> 
 <Area>Upper Missouri</Area> 
 <ID>MISSOURI-NUT</ID> 
 <Name>Missouri River</Name> 
 <code>10030101</code> 
 <County>Broadwater</County> 
 <Station_ID>M09MISSR05</Station_ID> 
</plan>
<plan>
 <planNumber>774</planNumber> 
 <Area>Columbia</Area> 
 <ID>FLAT-STILL-TPA-2013</ID> 
 <Name>Sheppard Creek</Name> 
 <Description>- 3A</Description> 
 <code>17010210</code> 
 <County>Flathead</County> 
 <Station_ID>C09SHEPC04</Station_ID> 
</plan>
</XMLReview>

HTML

<form>
 <input type="button" id="btnxml" value="XML" onclick="getXML()" />

   ID <input type="text" name="ID" id="ID">       
   planNumber<input type="text" name="Name" id="planNumber"> 
   area<input type="text" name="Area" id="Area">
   Name:  <input type="text" name="Name" id="Name">
   Description:  <input type="text" name="Description" id="Description">
   Station ID  <input type="text" name="Station_ID" id="Station_ID">
   <label class="Code-label" for="code">HUC</label>
    <select class="select_code" id="code" name="code" data-iconpos="left" data-icon="grid">
      <option></option>
      <option>  10010001</option>
      <option>  10010002</option>
      <option>  10020001</option>
    </select>
   <label class="county-label" for="County">County</label>
    <select class="select_county" id="County" name="County" data-iconpos="left" data-icon="grid">
     <option></option>
     <option>   Beaverhead </option>
     <option>   Big Horn    </option>
     <option>   Blaine  </option>
    </select>
</form>

スクリプト

<script>
  function getXML()
 {
 $.get("XMLReview.xml", function(data) {
  $.ajax({
    type: "GET",
    url: "XMLReview.xml",
    dataType: "xml",
    success: function (xml) {
      var select = $('#ID');
        $(xml).find('plan').each(function () {
        var ID = $(this).find('ID').text();
        select.append("<option>" + ID + "</option>");
        $("#ID").change(function () {
            var selectedIndex = $('#ID option').index($('#ID option:selected'));
            var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
                var value = $(this).text();
            });
         });
      }
    }); 
  alert(data);});
 }

</script>

残念ながら、これは機能していません。その理由はわかりません。誰でも私を助けてくれますか

4

2 に答える 2

0

1つまたは2つのこと：

onclick イベントをインラインで指定しています。

<input type="button" id="btnxml" value="XML" onclick="getXML()" />

すでにかなりの数の jQuery を使用しているため、すべてを 1 か所に保管しないでください。次のように JavaScript ブロックに追加するだけです。

<input type="button" id="btnxml" value="XML" />

と

$('#btnxml').click(function() {
    getXML();
});

JavaScript/ajax コードをチェックしないと、この構造は間違っています。

function getXML(){
    $.get("XMLReview.xml", function(data) {   <<======= REMOVE
        $.ajax({
            type: "GET",
            url: "XMLReview.xml",
            dataType: "xml",
            success: function (xml) {
                var select = $('#ID');
                $(xml).find('plan').each(function () {
                    var ID = $(this).find('ID').text();
                    select.append("<option>" + ID + "</option>");
                    $("#ID").change(function () {
                        var selectedIndex = $('#ID option').index($('#ID option:selected'));
                            var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
                            var value = $(this).text();
                        }); //END $(xml).find.eq.find.each
                    }); //END #ID.change
                }); //END $(xml).find.each
                alert(data);
            } //END AJAX.success fn
        }); //END $.ajax
    }); //END $.get  <<=================================== REMOVE
}

次のようになります。

function getXML(){
    $.ajax({
        type: "GET",
        url: "XMLReview.xml",
        dataType: "xml",
        success: function (xml) {
            var select = $('#ID');
            $(xml).find('plan').each(function () {
                var ID = $(this).find('ID').text();
                select.append("<option>" + ID + "</option>");
                $("#ID").change(function () {
                    var selectedIndex = $('#ID option').index($('#ID option:selected'));
                        var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
                        var value = $(this).text();
                    }); //END $(xml).find.eq.find.each
                }); //END #ID.change
            }); //END $(xml).find.each
            alert(data);
        } //END AJAX.success fn
    }); //END $.ajax
}

追加の $.get() ラッパーは不要です。

$.ajax()および$.get()と$.post()同じことを行うことに注意してください。あなたはより構造化された構造を使用しています$.ajax()。これは（IMHO）物事をまっすぐに保つのが簡単です。

$.get()type="GET"をハード$.post()コードし、type="POST"

また、私は XML dataType をあまり使用していませんがxml、次のコンテキストでは、AJAX コード ブロックの成功関数でそれを強く疑っています。

success: function (xml) {
    //post ajax code here, for eg.
    alert(xml);
}

サーバー側スクリプトから ECHOed/printed/etc されたものを含む変数ですか? 私はそれがXMLだとは思わないobject...

于 2013-09-20T17:31:48.310 に答える
0

ここではいろいろなことが行われているので、一連の修正よりも新しい実装の方が理解しやすいと思いました (JavaScript の理解に多少の作業が必要な場所に注意してみます) 最初のデモ. 今JavaScript：

$('#btnxml').on('click', function() {
    var select = $('#ID'),
        xml = $($.parseXML($('#XMLData').text())),
        plans = xml.find('plan');

    plans.each(function () {
        var ID = $(this).find('ID').text();
        select.append("<option>" + ID + "</option>");
    });

    $("#ID").change(function () {
        var selectedIndex = $('#ID option').index($('#ID option:selected')),
            plan = $(plans[selectedIndex]);

        $('#planNumber').val(plan.find('planNumber').text());
        $('#Area').val(plan.find('Area').text());
        $('#Name').val(plan.find('Name').text());
        $('#Description').val(plan.find('Description').text());
        $('#Station_ID').val(plan.find('Station_ID').text());

        $('#code').val(plan.find('code').text());
        $('#County').val(plan.find('County').text());
    }).trigger('change');
});

そして、HTML

<script type='text/xml' id='XMLData'>
  <XMLReview>
    <plan>
      <planNumber>773</planNumber> 
      <Area>Upper Missouri</Area> 
      <ID>MISSOURI-NUT</ID> 
      <Name>Missouri River</Name> 
      <code>10030101</code> 
      <County>Broadwater</County> 
      <Station_ID>M09MISSR05</Station_ID> 
    </plan>
    <plan>
      <planNumber>774</planNumber> 
      <Area>Columbia</Area> 
      <ID>FLAT-STILL-TPA-2013</ID> 
      <Name>Sheppard Creek</Name> 
      <Description>- 3A</Description> 
      <code>17010210</code> 
      <County>Flathead</County> 
      <Station_ID>C09SHEPC04</Station_ID> 
    </plan>
  </XMLReview>
</script>
<form>
    <input type="button" id="btnxml" value="XML" /><br/>
    ID <select type="text" name="ID" id="ID"></select><br/>
    planNumber<input type="text" name="Name" id="planNumber"><br/>
    area<input type="text" name="Area" id="Area"><br/>
    Name:  <input type="text" name="Name" id="Name"><br/>
    Description:  <input type="text" name="Description" id="Description"><br/>
    Station ID  <input type="text" name="Station_ID" id="Station_ID"><br/>
    <label class="Code-label" for="code">HUC</label>
    <select class="select_code" id="code" name="code" data-iconpos="left" data-icon="grid">
      <option></option>
      <option>10010001</option>
      <option>10010002</option>
      <option>10020001</option>
      <option>10030101</option>
      <option>17010210</option>
    </select>
    <br/>
    <label class="county-label" for="County">County</label>
    <select class="select_county" id="County" name="County" data-iconpos="left" data-icon="grid">
     <option></option>
     <option>Beaverhead</option>
     <option>Big Horn</option>
     <option>Blaine</option>
    </select>
</form>

まず、JSFiddle でこれを簡単に説明できるようにこれらの変更を行いましたが、最終的なコードとは必ずしも一致しません。

  • 私はAJAXリクエストを偽造しました（ここの他の回答は、jQueryの優れたAJAXヘルパーメソッドを適切に使用する方法について明確に説明しています）。この回答をあなたのものにまとめるとき、これらすべてが$.get()XML をリモートでフェッチする にラップされていると想定できます。
  • またclick、JavaScript のハンドルをバインドしました$('#btnxml')(これはよりクリーンですが、JSFiddle は名前付き関数を指す onclick 属性を好まないためです)。これは厳密に間違っているわけではなく、単純にクリーンです。

実質的な変更については次のとおりです。

  • あなたは実際に2つのことをしようとしています.$('#ID')セレクターにデータを入力します(これはもともと a でしたが<input type='text'>、このコードでは a に更新しました.データが入力された後、イベントハンドラー<select>をバインドしようとしています.changeまた、プログラムで<select>a を変更しても、変更イベントが自動的にトリガーされないため.trigger('change')、最後に a を追加しました。
  • inputまた、選択したプランの子ノードを取得して、対応する同じ名前のノードを更新しようとしているようにも見えます。.childNodesプロパティを使用することもできますが、これにはTextNodesXML ノード間のすべての空白が含まれます。それらを除外しようとするのではなく、個別にマップする方がきれいだと思いました。HTML と XML が常に更新されている場合、これはうまくいかないかもしれませんが、次のポイントは、とにかく完全に自動化されたアプローチを妨げる可能性があるということです。
  • 値に基づいてオプションを選択することには、いくつかの課題があります。jQuery は非常にスマートです。属性<select>を持たない一連のオプションを持つ要素があり、その要素内の s のいずれかの文字列でその要素を設定しようとすると、正しいことが行われます。ただし、その値に一致する要素がない場合は、黙って通過します。XML に、HTML に表示されないコードと郡の値が含まれています。不足しているコード値を追加して、機能していることを示しましたが、郡には追加しませんでしたvalue<select>.val()<option><select>. 考えられるすべてのコードと郡を知っていて、HTML を更新できる場合、これは問題になりません。代わりに、古い値が選択されている間に新しい値を追加したい場合は、コードが少し複雑になります。
于 2013-09-20T17:56:55.560 に答える