0

我最近从 XML 切换到 PHP，以便与我的简单 AJAX 程序一起使用。但是，我不知道如何像使用 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)生成的警报中的前两个 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>
4

3 回答 3

0

您的 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")
于 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');

或者像 Daniel Cheng 建议的那样将您的回复放在另一个 div 中。

于 2012-09-23T09:53:29.963 回答
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 回答