Question

我有一个从数据库调用数据的脚本。对于每个结果，输出一个新的div。但是，当单击调用函数search（）的按钮时，我只得到一个结果。我想问题是：我如何为每个结果创建一个新的div，而不是将其设置为找到的第一行？

function search()   {
    var xhr2 = new XMLHttpRequest();
    xhr2.addEventListener ("load", view);
    var reg = document.getElementById("type").value;
    xhr2.open("GET", "getresults.php?type=" + reg);
    xhr2.send();
}
function view(e, resulthtml)    {
    var array = JSON.parse(e.target.responseText);
    for (var count=0; count<array.length; count++)
    {
    var id = array[count].id;
    var username = array[count].username;
    var srcpath = array[count].srcpath;
    var title = array[count].title;
    var type = array[count].type;
    var postcode = array[count]. postcode;
    var description = array[count]. description;
    var price = array[count].price;
    var phone = array[count].phone;
    var lat = array[count].lat;
    var lon = array[count].lon;

    resulthtml =          "<div class='col-md-4'>"
                + "<div class='thumbnail'>"
                + "<img id='a' class='a' alt='300x200' src='" + srcpath + "'>"
                + "<div class='caption'>"
                + "<h3>"
                + description
                + "</h3>"
                + "<p>"
                + "£" + price + ""
                + "</p>"
                + "<p>"
                + "Contact number:"
                + "</p>"
                + "<p>"
                + "<input type='submit' value='Contact seller' onclick='search()'/>"
                + "</p>"
                + "</div>"
                + "</div>"
                + "</div>"

    }
    document.getElementById("row").innerHTML = resulthtml;
}   


</script>

Answer 1

你做不到

document.getElementById("row").innerHTML = resulthtml;

因为它会覆盖innerHTML的旧#row。相反，你可以这样做：

document.getElementById("row").innerHTML += resulthtml;

将resulthtml添加到返回的innerHTML字符串中，或使用方法：

document.getElementById("row").appendChild(resulthtml);

这完全相同。这是个人选择的问题，你将使用哪一个。

Answer 2

干杯。以为这是小事！

<script type="text/javascript">

function search()   {
    var xhr2 = new XMLHttpRequest();
    xhr2.addEventListener ("load", view);
    var reg = document.getElementById("type").value;
    xhr2.open("GET", "getresults.php?type=" + reg);
    xhr2.send();
}
function view(e, resulthtml)    {

resulthtml = "";

    var array = JSON.parse(e.target.responseText);
    for (var count=0; count<array.length; count++)

    {
    var id = array[count].id;
    var username = array[count].username;
    var srcpath = array[count].srcpath;
    var title = array[count].title;
    var type = array[count].type;
    var postcode = array[count]. postcode;
    var description = array[count]. description;
    var price = array[count].price;
    var phone = array[count].phone;
    var lat = array[count].lat;
    var lon = array[count].lon;

    resulthtml = resulthtml +         "<div class='col-md-4'>"
                + "<div class='thumbnail'>"
                + "<img id='a' class='a' alt='300x200' src='" + srcpath + "'>"
                + "<div class='caption'>"
                + "<h3>"
                + description
                + "</h3>"
                + "<p>"
                + "£" + price + ""
                + "</p>"
                + "<p>"
                + "Contact number:"
                + "</p>"
                + "<p>"
                + "<input type='submit' value='Contact seller' onclick='search()'/>"
                + "</p>"
                + "</div>"
                + "</div>"
                + "</div>"

    }
    document.getElementById("row").innerHTML = resulthtml;
}   


</script>

小JS循环问题

2 个答案: