0

我提出了一个 xhr 请求，我得到了响应，然后我将一些值附加到了一个表中。然后我在另一个页面上发出第二个 xhr 请求，得到一些我想在先前插入的行下附加的其他结果..问题是我所做的每个下一个附加而不是“在”先前创建的行下，都在它之前..我想这是因为这些是动态创建的..但是有什么办法可以解决这个问题吗？无需向表或行添加类或 ID ..

这是我的代码..首先是html

<body>
    <table border="1">
        <tr>
        <th>first cell</th>
        <th>second cell</th>
        </tr>
    </table>
    <div id="div1">
</body>

和我的 javascript

 function response(url, callback{
     //xhr request
  }

var url1 = "http://example1.com";
request(url1, function(response){
        var temp1 = document.getElementsByTagName("table")[0];
    var temp2create = document.createElement("tr");
    var temp3 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
    temp2create.innerHTML = temp3;
    temp1.appendChild(temp2create);
 });
var url2 = "http://example1.com";
request(url2, function(response){
        var temp4 = document.getElementsByTagName("table")[0];
    var temp5create = document.createElement("tr");
    var temp6 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
    temp5create.innerHTML = temp6;
    temp4.appendChild(temp5create);
 });

所以，不是在前一行之后添加新行，而是在..

4

3 回答 3

1

可能是第一个 xhr 请求比第二个请求花费的时间更长。因此，第二个在第一个接收并附加其响应之前附加其响应。如果会返回固定数量的请求，您可以在表中创建占位符行，例如：

<body>
    <table border="1">
        <tr>
            <th>first cell</th>
            <th>second cell</th>
        </tr>
        <tr id="tr1">

        </tr>
        <tr id="tr2">

        </tr>
    </table>
</body>

和 javascript：

(url1,response())
{
    document.getElementById("tr1").innerHTML("someresponse");
}

(url2,response())
{
    document.getElementById("tr2").innerHTML("some other response");
}

或者，如果时间不重要，您可以链接请求按顺序发生。

request(url1, function(response){
    var temp1 = document.getElementsByTagName("table")[0];
    var temp2create = document.createElement("tr");
    var temp3 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
    temp2create.innerHTML = temp3;
    temp1.appendChild(temp2create);

    var url2 = "http://example1.com";
    request(url2, function(response){
        var temp4 = document.getElementsByTagName("table")[0];
        var temp5create = document.createElement("tr");
        var temp6 = ("<td>" + someresponse + "</td><td>" + someotherresponse + "</td>");        
        temp5create.innerHTML = temp6;
        temp4.appendChild(temp5create);
     });
});
于 2012-11-28T00:08:15.333 回答
1

尼古拉斯，没有。调用是异步的，这意味着它们运行和完成的顺序是未定义的。您不能依赖与启动顺序匹配的完成顺序。如果您需要，那么要做的就是从第一个回调（链接）中调用第二个 xhr。

于 2012-11-28T00:16:47.050 回答
0

这是我在最近的一个项目中使用的，必须将 JSON 附加到 HTML。

定义表

<table id="geoTable" border="1"></table>

填充

appendTableRow('geoTable', "MPH", 70);
appendTableRow('geoTable', "KPH ", 112.654);

添加行的功能

function appendTableRow(tableName,name,value)
{
    tableName = "#" + tableName;
   //<tr><td>name</td><td>value</td></tr>

   var tableRow = "<tr><td>$name</td><td>$value</td></tr>";
   tableRow = tableRow.replace("$name",name);
   tableRow = tableRow.replace("$value",value);        
   $(tableName).append(tableRow);
}
于 2016-07-08T17:13:04.647 回答