Question

我最近从XML切换到PHP，用于我的简单AJAX程序。但是，我无法弄清楚如何使用.each来查找和提取元素的数据，就像我使用XML文件格式一样。

输出的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）生成的警告中的前两个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问题是它只能加载第一个数据元素。我通过将所有数据移动到一个单独的元素来解决这个问题。我也可以将所有元素重命名为不同的类。我不知道哪个更好，但我使用的是正式的。

<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>

Answer 1

尝试加载。例如：

$('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更灵活，只有一个缺点。如果需要，您无法使查询同步。但它还有很多其他优点。

对于你想要做的。我没有看到你的代码有任何问题。如果输出的格式是特定的，您可以编写适合该格式的代码

Answer 2

您的JavaScript代码存在两个问题。

我记得，当您执行$(html) 之类的操作时，应该只有一个根元素。

一个快速解决方案是添加此行

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

或者您可以更改PHP以输出包含的结果：

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

然后成功提醒将起作用。

另一个问题是关于这一行

$(this + "div.product_detail")

应该是

$(this).find("div.product_detail")

Answer 3

它无法正常工作，因为$（html）会返回你的数组：
[ <span class="con_status">Connected successfully</span>, <div class="product">…</div>, <div class="product">…</div> ]

所以你可以像这样使用.filter（）函数：
$(html).filter('.product');

或者像Daniel Cheng建议的那样把你的回答放在另一个div中。

从PHP响应中获取元素的数据

3 个答案: