javascript - jQuery ajax获取html内容并传递参数

Question

我想将下面这段代码的append()中的html内容移动到一个新的.html文件中，然后使用ajax将这些内容附加回我的文件

这是我的旧代码

for(var i = 0; i < data.length; i++) {
    $('#table_body').append('<tr><td>'+ data[i].variable1 +'</td><td><a href="javascript:void(0)" onclick="callFunctionA(\''+data[i].variable2+'\');"></a></td></tr>');
}

我想将我的代码更改为这样

.js 文件:

for(var i = 0; i < data.length; i++) {
     $.ajax({
          url: "table_body.html",
          success  : function(result){ $('#table_body').append(result) }

.html 文件:

<tr>
<td>data[i].variable1</td>
<td>
    <a href="javascript:void(0)" onclick="callFunctionA(\''+data[i].variable2+'\');"></a>
</td>
</tr>

但是如何将动态值传递给 data[i].variable1 和 data[i].variable2？

提前致谢。

Answer 1

编辑:刚刚想出了一个与原始解决方案不同的解决方案。假设您不想在另一端获取参数。现在都是js了。

<script>
    var data = [{variable1:'row1 td1',variable2:'row1 td2'},{variable1:'row2 td1',variable2:'row2 td2'}];
    for(var i = 0; i < data.length; i++) {
        $.ajax({
            url: "table_body.html",
            indexVal: i,
            success: function(result,i){
                id = this.indexVal;
                res = result.replace("__data1__", data[id].variable1).replace("__data2__", data[id].variable2);
                $('#table_body').append(res);
            }
        });
    }
</script>

并且在table_body.html文件中

<tr>
    <td>__data1__</td>
    <td>
        <a href="javascript:void(0)" onclick="callFunctionA('__data2__');">click me</a>
    </td>
</tr>