js获取json数据，自动添加至表格，如何防止重复

JavaScript031

js获取json数据，自动添加至表格，如何防止重复,第1张

一、使用js获取接口数据的方法①$get(url,[data],[callback])url:请求的地址data:请求数据的列表callback:请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个为服务器的状态,是可选参数。其中服务器返回数据的格式其实是字符串形式,并不是我们想要的JSON数据格式。上例子：var url3 = 'http://mshop.gemstc.com/ApiService/msgget.php'$.get(url3,function(data){alert(data) })此时如果对data采用json解析数据，得到的值为undefined。所以我们使用这种get方法获取到的值要是JSON格式，需要定义获取的数据类型为json格式，上例子：var url3 = 'http://mshop.gemstc.com/ApiService/msgget.php'$.get(url3,function(data){ $('#result').append('interval:'+data.name+'')//此时返回的是JSON格式的内容，例：我们可以使用data.name获取到name字段的值并输出。 }, 'json')②$post(url,[data],[callback],[type])post方法中多了一个type：获取数据的类型格式，post其实和get是一样的用法，type不定义，返回的是字符串类型的，定义为json格式，返回的就是json格式的数据，此处可以仿照上面的get方法，把get改成post就搞定了，就不多说了。

json解析出来是数组，你就用

html = ‘’

html += '<table>'

for(var i = 0i<length i++){

html += '<tr><td>内容1</td><td>内容2</td><td>内容3</td></tr>‘

}

html += '</table>'

然后把html输出到页面上

window.onload = function () {

    var datanav = [{ "name": "张三", "position": "1", "powerrate": "2", "waterrate": "3", "healthcosts": "4", "watermeter": "5", "ammeter": "6", "linkman": "7", "phone": "8", "rental": "9", "tenancy": "10", "remark": "11" }, { "name": "李四", "position": "11", "powerrate": "10", "waterrate": "9", "healthcosts": "8", "watermeter": "7", "ammeter": "6", "linkman": "5", "phone": "4", "rental": "3", "tenancy": "2", "remark": "1"}]

    var tb = document.getElementById("tb")

    for (var i = 0 i < datanav.length i++) {

        var row = tb.insertRow(tb.rows.length)

        var c1 = row.insertCell(0)

        c1.innerHTML = datanav[i].name

        var c2 = row.insertCell(1)

        c2.innerHTML = datanav[i].waterrate

        var c3 = row.insertCell(2)

        c3.innerHTML = datanav[i].powerrate

        var c4 = row.insertCell(3)

        c4.innerHTML = datanav[i].healthcosts

        var c5 = row.insertCell(4)

        c5.innerHTML = datanav[i].watermeter

        var c6 = row.insertCell(5)

        c6.innerHTML = datanav[i].ammeter

        var c7 = row.insertCell(6)

        c7.innerHTML = datanav[i].linkman

        var c8 = row.insertCell(7)

        c8.innerHTML = datanav[i].phone

        var c9 = row.insertCell(8)

        c9.innerHTML = datanav[i].rental

        var c10 = row.insertCell(9)

        c10.innerHTML = datanav[i].tenancy

    }

} <table border="1" id="tb">

<tr>

<td>租户</td>

<td>水费</td>

<td>电费</td>

<td>卫生费</td>

<td>水表位置</td>

<td>电表位置</td>

<td>联系人</td>

<td>电话</td>

<td>房费</td>

<td>租赁合同期限</td>

</tr>

</table>