4

私は3つのHTML DropDownList（<select><option></option></select>）を持っています。1DropDownListつ目はカテゴリを含み、2つ目はさまざまな製品のサブカテゴリを含み、3つ目はブランド（またはメーカー）を含みます。

カテゴリを選択すると、Ajax関数に渡されるカテゴリIDに従って、2つのドロップダウンサブカテゴリとブランドがデータベースから一度に入力される必要があります。次のAjaxコードを使用しています。

function ajax()
{
    if(window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp = new ActivexObject("Microsoft.XMLHTTP");
    }
}

function getBrandList(selected)  //selected is the category id.
{               
    ajax();
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("brandList").innerHTML=xmlhttp.responseText;            
        }
    }

    xmlhttp.open("GET","ajax/BrandAjax.php?selected="+selected, true);
    xmlhttp.send();     
    alert(selected);            
}

function getSubcategoryList(selected) //selected is the category id.
{                       
    getBrandList(selected); //First above function is invoked to populate brands.
    ajax();
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("subCategoryList").innerHTML=xmlhttp.responseText;                              
        }
    }

    xmlhttp.open("GET","ajax/SubCatAjax.php?selected="+selected, true);
    xmlhttp.send();             
}

カテゴリが選択さgetSubcategoryList(selected)れると、Ajaxリクエストを実行するJavascript関数が呼び出されます。問題は、サブカテゴリとブランドドロップダウンの両方を一度に入力する必要があることです（カテゴリが選択されている場合）。

これは機能しており、渡されたカテゴリID（上記の関数のパラメーター）に従って、両方のドロップダウンに一度に入力されますselected。

関数の下部にあるアラートボックスを不必要に使用していますgetBrandList()。このアラートボックスにコメントを付けると、サブカテゴリであるドロップダウンが1つだけ表示されます。ブランドは空のままです。このアラートボックスはもう必要ありません。

なぜこれが起こるのですか？解決策は何ですか？

4

5 に答える 5

2

まず、このためにJQueryのようないくつかの最新のJavaScriptフレームワークを試すことをお勧めします。

@tzerbの言い方：最初のAJAXリクエストが終了する前にグローバル変数xmlhttpをオーバーライドします。これにはローカル変数を使用する必要があります。

function ajax()
{
    var xmlhttp; //!!
    if(window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp = new ActivexObject("Microsoft.XMLHTTP");
    }
    return xmlhttp; //!!
}

function getBrandList(selected)  //selected is the category id.
{               
    xmlhttp = ajax(); //!!
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("brandList").innerHTML=xmlhttp.responseText;            
        }
    }

    xmlhttp.open("GET","ajax/BrandAjax.php?selected="+selected, true);
    xmlhttp.send();     
    //alert(selected);            
}

function getSubcategoryList(selected) //selected is the category id.
{                       
    getBrandList(selected); //First above function is invoked to populate brands.
    xmlhttp = ajax(); //!!
    xmlhttp.onreadystatechange=function()
    {
        if(xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("subCategoryList").innerHTML=xmlhttp.responseText;                              
        }
    }

    xmlhttp.open("GET","ajax/SubCatAjax.php?selected="+selected, true);
    xmlhttp.send();             
}

JQueryを使用すると、コードは次のようになります。

function getBrandsList(selected){
    $("#brandList").load("ajax/BrandAjax.php?selected="+selected);
}
function getSubcategoryList(selected){
    $("#brandList").load("ajax/SubCatAjax.php?selected="+selected);
}
于 2012-05-29T17:05:54.833 に答える
2

2番目のajax（）呼び出しは、xmlhttp変数を一掃していると思います。アラートを入力すると、2番目の呼び出しを開始する前に最初の呼び出しが終了する時間が与えられているに違いありません。おそらく、以前にajax（）を呼び出して、ハンドラーから呼び出しを削除する必要があります。

于 2012-05-27T07:01:00.740 に答える
1

seriyPSは基本的にこれで目標を達成しました。問題は実際にはxmlhttp変数です。使用されている各関数内でローカルに宣言する必要があります。基本的に、関数呼び出しのクロージャーを作成します。問題は必ずしも「ローカル」である必要があるということではありませんが、グローバル変数であるため、2番目のリクエストで再定義されています。変数が2番目のリクエストを指すようになったため、これは基本的に最初のリクエストを強制終了します。

アラートボックスが機能する理由は、[OK]をクリックする前に、最初のリクエストがajaxリクエストを終了しているためです。（アラートボックスはJavaScriptの実行を一時停止するため、[OK]をクリックするまで2番目のリクエストを遅らせます。）

これを修正するには、リクエストごとに異なる変数を使用するようにコードを変更できます。関数を次のようなものに変更してみてください。

// Global Variables
var brandListRequest;
var subcategoryRequest;

function ajax()
{
    var xmlhttp; //!!
    if(window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp = new ActivexObject("Microsoft.XMLHTTP");
    }
    return xmlhttp; //!!
}

function getBrandList(selected)  //selected is the category id.
{               
    brandListRequest = ajax(); //!!
    brandListRequest.onreadystatechange=function()
    {
        if(brandListRequest.readyState==4 && brandListRequest.status==200)
        {
            document.getElementById("brandList").innerHTML=brandListRequest.responseText;            
        }
    }

    brandListRequest.open("GET","ajax/BrandAjax.php?selected="+selected, true);
    brandListRequest.send();     
    //alert(selected);            
}

function getSubcategoryList(selected) //selected is the category id.
{                       
    getBrandList(selected); //First above function is invoked to populate brands.
    subcategoryRequest = ajax(); //!!
    subcategoryRequest.onreadystatechange=function()
    {
        if(subcategoryRequest.readyState==4 && subcategoryRequest.status==200)
        {
            document.getElementById("subCategoryList").innerHTML=subcategoryRequest.responseText;                              
        }
    }

    subcategoryRequest.open("GET","ajax/SubCatAjax.php?selected="+selected, true);
    subcategoryRequest.send();             
}
于 2012-06-03T02:17:55.367 に答える
1

コールバック関数を使ってもいいと思います。しかし、私はjqueryを使用することをお勧めします。そのはるかに簡単です。そこですべてを手動で行う必要はありません（xhttprequestオブジェクトを作成し、応答の状態とそれらの不器用なActiveXオブジェクトに関連するすべてのものを維持します）

于 2012-05-29T17:34:46.783 に答える
1

そのためにjQueryを使用することをお勧めします。

 1. Load the first dropdown with categories on page load
 2. Call the following ajax call on change event of the first dropdown, categoryList
    $('#categoryList').change(function () {
      $('#subCategoryList').load("ajax/SubCatAjax.php?selected="+this.value);
      $('#brandList').load("ajax/BrandAjax.php?selected="+$('#subCategoryList').val());
    });
 3. Call the following ajax call on change event of the second dropdown, subcategoryList.
    $('#subCategoryList').change(function () {
      $('#brandList').load("ajax/BrandAjax.php?selected="+this.value);
    });

PS私はあなたのajaxリクエストがオプションを含む文字列を返すと思います。<option value='1'>subcategory1</option><option value='2'>subcategory2</option>..等。選択したカテゴリではなく、選択したサブカテゴリに基づいてブランドをロードしたい。

于 2012-05-29T17:21:40.783 に答える