例子:

html代码：

<div id="box"></div>

css代码：

table{border-collapse: collapse;text-align: center;line-height: 2;
}
td{border: 1px solid #000;
}

json数据：

[{"name":"张三","age":"23","sex":"男"},{"name":"李四","age":"26","sex":"男"},{"name":"王五","age":"18","sex":"女"}
]

1、使用原生ajax方法

<script>function getXMLHttp(){var xhr=null;if(window.XMLHttpRequest){xhr=new XMLHttpRequest();  //chrome ff}else{xhr=new ActiveXObject("Microsoft.XMLHttp");  //ie
            }return xhr;}window.onload=function () {var xhr=getXMLHttp();xhr.onreadystatechange=function(){if(xhr.readyState==4 && xhr.status==200){var data=JSON.parse(xhr.responseText);var str="<table width='300'><tr><td>姓名</td><td>年龄</td><td>性别</td></tr>";for(var i=0;i<data.length;i++){str+="<tr>";for(var key in data[i]){str+="<td>"+data[i][key]+"</td>";}str+="</tr>"}document.getElementById("box").innerHTML=str;}}xhr.open("GET","userInfo.json");xhr.send();}</script>

2、使用jquery $.ajax方法:

<script>$.ajax({url:"userInfo.json",dataType:"json",success:function(data){var table=$("<table width='300'><tr><td>姓名</td><td>年龄</td><td>性别</td></tr>");$(data).each(function(index,element){var tr=$("<tr></tr>");$.each(element,function (i,e) {tr.append($("<td>"+e+"</td>"));})table.append(tr);})$("#box").html(table);}})</script>

3、引入模板并用ajax方法使用：

<script src="jquery.min.js"></script>
<script src="template-native.js"></script>

<script type="text/template" id="t">    <table width="300">        <tr><td>姓名</td><td>年龄</td><td>性别</td></tr>    <%for(var i=0;i<userInfo.length;i++){%>        <tr>            <td><%=userInfo[i].name%></td>            <td><%=userInfo[i].age%></td>            <td><%=userInfo[i].sex%></td>        </tr>    <%}%>    </table></script><script>    $.ajax({        url:"userInfo.json",        dataType:"json",        success:function(data){            var userObj={                userInfo:data            }            var str=template("t",userObj);            $("#box").append(str);

        }    })</script>

浏览器效果：