后台返回json 前台Ajax循環遍歷顯示到table

后台

public ActionResult List()
{

//list集合

 

var a = bll.getUserList();

//注意這里的a是要返回的json

return Json(a,JsonRequestBehavior.AllowGet);
}

前台ajax接受json

$.ajax({
url: "/User/Index",
type: "get",
dataType: "json",
success: function (a) {
var tab = $("#tabjson");
$.each(a, function (name, val) {
tab.append("<tr>");

//方法一
//$("<td>" + val.userID + "</td>").appendTo($("#tabjson"))
//$("<td>" + val.UserName + "</td>").appendTo($("#tabjson"))

//方法二和方法一差不多(可以熟悉下append和appendTo的區別)

//$("#tabjson").append("<td>" + val.userID + "</td>");
//$("#tabjson").append("<td>" + val.UserName + "</td>");
//tab.append("</tr>");

//方法三   推薦使用這種方法 將item追加到table
item = "<tr><td>" + val['userID'] + "</td><td>" + val['UserName'] + "</td><td>" + val['password'] + "</td></tr>";

$('#tabjson').append(item);

});

});

 

//table顯示

<table id="tabjson">
<tbody >
<tr>
<th>序號</th>
<th>用戶名</th>
</tr>
</tbody>

</table>