1

私は現在、Firefox、Chrome、Safari、Opera、さらには IE 10 では問題がありませんが、10 より前のバージョンの IE で ajax を動作させるのに多くの問題を抱えています。最初のデータベースで何かが選択され、次に 2 番目のデータベースで何かが選択されるたびに、mysql データベースからデータが取得されます。Apache ログには、IE 8 または 9 を使用しているときに POST リクエストが実行されたことが表示されず、選択メニューにデータが入力されません。

これは私のJavaScriptコードです:

function getXMLHttpRequest() {

   var xhr = null;

   if (window.XMLHttpRequest || window.ActiveXObject) {
      if (window.ActiveXObject) {
         try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
         } catch(e) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }
      } else {
         xhr = new XMLHttpRequest();
      }
   } else {
      alert("Your browser doesn't support XMLHTTPRequest...");
      return null;
   }

   return xhr;

}

function request(oSelect) {

   var value = oSelect.options[oSelect.selectedIndex].value;

   var xhr = getXMLHttpRequest();

   xhr.onreadystatechange = function() {
      if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
         displayOptions(xhr.responseText, oSelect);
      }
   }

   xhr.open("POST", "ajax.pl", true);
   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xhr.send(oSelect.name + "=" + value);

}

function displayOptions(oData, oSelect) {

   if (oSelect.name == "genus") {
      document.getElementsByName("species")[0].disabled = false;
      document.getElementsByName("species")[0].innerHTML = oData;
      document.getElementsByName("subspecies")[0].disabled = true;
      document.getElementsByName("subspecies")[0].innerHTML = "";
   }
   if (oSelect.name == "species") {
      document.getElementsByName("subspecies")[0].disabled = false;
      document.getElementsByName("subspecies")[0].innerHTML = oData;
   }

}

これまでのところ、xhr.open コマンドを POST から GET に変更しようとしましたが、うまくいきませんでした。また、xhr.send コマンドで perl cgi への絶対パスを入力しようとしましたが、IE 8 にはまったく影響しませんでした。

私も次のことを試しました：

xhr.onreadystatechange = function() {
   if(xhr.readyState == 0) {
      alert("zero");
   }
   if(xhr.readyState == 1) {
      alert("one");
   }
   if(xhr.readyState == 2) {
      alert("two");
   }
   if(xhr.readyState == 3) {
      alert("three");
   }
   if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
      alert("four");
      displayOptions(xhr.responseText, oSelect);
   }
}

これにより、Chrome で次の出力が得られます。

one
two
three
four

私はIE 8でこれを持っていますが：

one
one
four

私は初心者なので、この問題の原因を見つけることができません。答えを求めてウェブをさまよっていますが、まだ見つかりません。

私が必死になり始めたので、どんな人でも大歓迎です。

4

1 に答える 1

1

Oscar が提案したように、jQuery を使用して回避策を見つけました。

上記の投稿でjs関数を置き換えたコードを次に示します。これは魅力的に機能します。

$(document).ready(function() {

var $genus = $('#genus');
var $species = $('#species');
var $subspecies = $('#subspecies');

$genus.on('change', function() {

    var value = $(this).val();

    $species.empty();
    $subspecies.empty();

    if(value != '') {
        $species.removeAttr('disabled');
        $subspecies.attr('disabled', 'disabled');

        $.ajax({
            url: 'ajax.pl',
            data: 'genus=' + value,
            dataType: 'html',
            success: function(code_html) {
                $(code_html).appendTo('#species');
            }
        });
    } else {
        $species.attr('disabled', 'disabled');
        $subspecies.attr('disabled', 'disabled');
    }
});

$species.on('change', function() {

    var value = $(this).val();

    $subspecies.empty();

    if (value != '') {
        $subspecies.removeAttr('disabled');

        $.ajax({
            url: 'ajax.pl',
            data: 'species=' + value,
            dataType: 'html',
            success: function(code_html) {
                $(code_html).appendTo('#subspecies');
            }
        });
    } else {
        $subspecies.attr('disabled', 'disabled');
    }
});

});
于 2013-08-07T08:48:21.620 に答える