小JS回路问题

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

你在循环的每次迭代覆盖resulthtml。将其初始化为循环外部的空字符串，然后添加到它。

编辑：你也在循环中做了很多工作，可以在它之外提升，主要是所有的字符串连接。这在浏览器上会更容易：

var item, id, username, srcpath, title, type, postcode, description, price, phone, lat, lon, 
    resulthtml = '', 
    pre = "<div class='col-md-4'><div class='thumbnail'><img id='a' class='a' alt='300x200' src='", 
    inner1 = "'><div class='caption'><h3>", 
    inner2 = "</h3><p>£", 
    post = "</p><p>Contact number:</p><p><input type='submit' value='Contact seller' onclick='search()'/></p></div></div></div>"; 

for (var count=0; count<array.length; count++) 
    { 
    item = array[count]; 
    id = item.id; 
    username = item.username; 
    srcpath = item.srcpath; 
    title = item.title; 
    type = item.type; 
    postcode = item. postcode; 
    description = item. description; 
    price = item.price; 
    phone = item.phone; 
    lat = item.lat; 
    lon = item.lon; 

    resulthtml += pre + srcpath + inner1 + description + inner2 + price + post; 

    } 

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> 

Answer 3

你不能这样做

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

因为这将覆盖#row老innerHTML。相反，你可以这样做：

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

这增加resulthtml到innerHTML返回的字符串，或者使用方法：

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

这不完全一样的东西。这是一个你将要使用的个人选择的问题。