Question

我有第三方脚本生成的搜索结果，我想添加数据。我已经解析了结果以获取id的数组，并查询数据库以获取其他字段。 ajax成功方法接收到格式化的数组，但现在我仍然坚持如何将这些结果放到DOM中的正确位置。

HTML：

    <div class="ihf-results-property-info">
        <div class="ihf-results-price">LIST: $2,150,000</div>
        <div class="ihf-results-links"> <a href="#"> 24 Photos </a>
    </div>
    <div class="ihf-results-extra-info">
        <div class="ihf-results-listingnum hidden-xs">Listing # 727938</div>
    </div>
    Repeat...

示例中包含的最后一个div具有我用于查询的唯一ID。我想用它来将ajax返回与DOM中的正确放置相关联。这是我的javascript：

jQuery(document).ready(function($) {

    //  grab the listings numbers so we can query the db for extra data
    var listings = $('.ihf-results-listingnum').map(function() {

        // grab just the digits
        var listingNum = $(this).text().replace(/[^0-9]/g, '');

        // add the listing number to the parent so we can target it later
        $( this ).parents('.ihf-results-extra-info').parent().addClass('marketing-details-' + listingNum);

        return listingNum;

    // use .get to create  an array of the listing numbers
    }).get();

    $.ajax({
        type: "GET",
        url: "custom/07-idx-queries.php",
        data: 'mlsNums=' + listings, // looks like ?mlsNums=735383,727468,699876...
        success: function(result) {
            // this logic came from here: http://stackoverflow.com/questions/15311320/how-to-work-with-jquery-ajax-and-php-array-return
            resultJson = $.parseJSON(result); 
            if (typeof resultJson == 'object') {
                jsObject = eval(resultJson);

                jsArray = [];
                for(elem in jsObject){
                    jsArray.push(jsObject[elem]);
                }
                console.log(jsArray);
                // this works as expected, except keys are 0 based

                // This is where it all falls apart. I want to extract each object and stick it in the DOM in the correct place
                jQuery.each(jsArray, function(key, value) {
                    $( this ).appendTo('.marketing-details-' + key);
                });
            }
            else {
                console.log("error occurred");
            }
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
        }
    })
});

我正在使用的php从db生成所需的结果，除了它是一个数值数组。我认为关联数组在尝试将结果放入DOM时效果会更好，因为我可以使用ID作为键并将它们与我添加的类匹配。以下是custom / 07-idx-queries.php的相关代码：

$mls_nums = explode(",",$_GET['mlsNums']);
// removed all of the conditionals to keep the question clean
$html = array();

    foreach ($mls_nums as $mls_num) {
        // just retreiving a single object from each row for now
        $remarks = $mysqli->query("SELECT mr FROM listings WHERE ln = '$mls_num'")->fetch_object()->mr;

        // format the data
        $my_html = "<p class='marketing-remarks mlsnum-".$mls_num."'>$remarks</p>";

        // build an array of the results - necessary?
        array_push($html,$my_html);
    }

    // send the data back in a JSON string
    echo json_encode($html);

所以我的目标是在数据库中查询最多10行，并将结果插入到相同数量的新div中，这些div是其类中具有相同ID号的div的子节点。我非常感谢任何帮助。

Answer 1

在PHP中执行此操作：

$html[$mls_num] = $my_html;
// this isn't needed
// array_push($html,$my_html);

现在，您返回的数据可以与目标div绑定。

不清楚您是否可以控制示例第一部分中的HTML，但这只是一种方法。

<div class="ihf-results-listingnum hidden-xs">Listing # 727938</div>
<div class="remarks" id="remarks_<?= $listingid; ?>"></div>

然后在JavaScript $("#remarks_" + key).html(value);

中

否则，您需要使用jQuery使用:contains选择器找到包含列表ID的div：

$("div:contains('# " + key + "')").appendTo(value);

'＃“+ key +”'等同于＃1234或其他任何东西。如果同一个列表在页面上两次，这将无效！

Answer 2

好的，这是工作成功的方法。感谢LG_PDX清理了php。我消除了不必要的处理，因为.each()似乎只是对JSON响应进行了迭代：

            success: function(result) {
            resultJson = $.parseJSON(result);
            if (typeof resultJson == 'object') {

                $.each(resultJson, function(key, value) {
                    $('.marketing-details-' + key).append( value );
                });
            }
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
        }

使用jQuery ajax数组结果更新DOM

2 个答案: