0

最近、単純なAJAXプログラムで使用するためにXMLからPHPに切り替えました。ただし、XMLファイル形式で行ったように、.eachを使用して要素のデータを検索してプルする方法を理解できません。

出力されるHTMLは正しいです。ユーザーが検索を入力すると、MySQLデータベースから生成されたphpページを受け取ります。

私がやりたいのは、.eachを使用して「div.product」を取得し、そのdivに含まれる要素を調べ、それらのデータを使用して、ページにさらに多くの要素とスタイルを追加することです。

function htmlParser() {
    var search_name_field = $("input.search").val();
    $.ajax({
        type: "POST",
        url: "load_data.php?product=" + search_name_field,
        cache: false,
        dataType: "html",
        success: function(html){
            alert(html);    // This shows php response perfectly
            $(html).find("div.product").each(function(){    
                alert("success!"); // Doesn't appear
                var productcode = $(this + "div.product_detail").data("code");
                alert(productcode);
                $("#output").empty();
                $("#output").append("Product Code: " + productcode + "<br>"); 
            });
        }
    })
}

これは、 alert（html）によって生成されたアラートの最初の2つのdiv.productです。

<span class="con_status">Connected successfully</span>
<div class="product">
    <div class="product_detail" data-code="HW100"></div>
    <div class="product_detail" data-name="Loaded Hardware 1&quot;"></div>
    <div class="product_detail" data-price="7"></div>
    <div class="product_detail" data-hideproduct=""></div>
    <div class="product_detail" data-stockstatus="13"></div>
    <div class="product_detail" data-productdescriptionshort=""></div>
    <div class="product_detail" data-producturl=""></div>
    <div class="product_detail" data-photourl=""></div>
</div>
<div class="product">
    <div class="product_detail" data-code="HW125"></div>
    <div class="product_detail" data-name="Loaded Hardware 1.25&quot;"></div>
    <div class="product_detail" data-price="7"></div>
    <div class="product_detail" data-hideproduct=""></div>
    <div class="product_detail" data-stockstatus="13"></div>
    <div class="product_detail" data-productdescriptionshort=""></div>
    <div class="product_detail" data-producturl=""></div>
    <div class="product_detail" data-photourl=""></div>
</div>

編集：私のajaxの問題は、最初のデータ要素しかロードできないことです。すべてのデータを1つの要素に移動することで、これを修正しました。すべての要素の名前を別のクラスに変更することもできます。どちらが良いかわかりませんが、フォーマルを使用しています。

<div class="result">
    <div class="product"><div class="product_detail"
    data-code="LCSDC"
    data-name="Loaded Longboards - Dervish COMPLETE" data-price="240"
    data-hideproduct="Y"
    data-stockstatus="0"
    data-productdescriptionshort="Dervish longboard deck from Loaded Carving Systems. With a lower center of gravity and a torsionally stiff design- the Dervishes are built to hold an edge and maximize energy return. A drop-thru carver designed to work with most reverse kingpin 180mm Trucks &amp; 70mm+ wheels. Small nose and tail for manual &amp; shovits."
    data-producturl=""
    data-photourl="">
    </div></div>
</div>
4

3 に答える 3

0

ロードしてみてください。例えば：

$('selector for your div to parse data').load('samplepage.php #div_you_want_to load')

さらに、次のことができます。

$('selector for your div to parse data').load('samplepage.php #div_you_want_to load', function(){
//this triggers after it fetches the page
})

http://api.jquery.com/load/を参照してください

.ajaxよりも柔軟性があり、欠点は1つだけです。必要に応じて、クエリを同期させることはできません。しかし、他にもたくさんの利点があります。

あなたがやりたい.eachについては、私はあなたのコードに何の問題も見ていません。出力の形式が特定の場合は、その形式に合うようにコードを記述できます

于 2012-09-23T09:40:00.010 に答える
0

JavaScriptコードには2つの問題があります。

私が思い出したように、のようなことをするときは、ルート要素は1つだけでなければなりません$(html)。

これに対する簡単な解決策の1つは、この行を追加することです

html = "<div>" + html + "</div>";
$(html).find("div.product").each(function(){

または、PHPを変更して、次のようにラップされた結果を出力することもできます。

<div class="result">...</div>

その後、成功アラートが機能します。

他の問題はこの行についてです

$(this + "div.product_detail")

それは次のようなものでなければなりません

$(this).find("div.product_detail")
于 2012-09-23T09:49:41.493 に答える
0

$（html）が次のように配列を返しているため、機能していません。
[ <span class=​"con_status">​Connected successfully​&lt;/span>​, <div class=​"product">​…​&lt;/div>​, <div class=​"product">​…​&lt;/div> ​]

したがって、次のように.filter（）関数を使用できます。
$(html).filter('.product');

または、DanielChengが提案したような別のdivに応答を入れてください。

于 2012-09-23T09:53:29.963 に答える