もっと読むをtext/templateですっきり書く
<script> var page = 1; function getMore(){ $.ajax({ data : {"page" : page,"submit" : "more" }, dataType : "json" }).done(function(json){ var tablehtml = []; for( var i=0,l=json.length; i<l; i++ ){ var elem = json[i]; var html = $('#my-template').text() .replace(/\{id\}/gm,elem.id) .replace(/\{name\}/gm,elem.name) .replace(/\{gif\}/gm,elem.gif) .replace(/\{url\}/gm,elem.url) .replace(/\{created_at\}/gm,elem.created_at); tablehtml.push(html); } $("#maintable tbody").append(tablehtml.join("")); page++; }); } $(function(){ // event $("#more").on("click",getMore); }) </script> <script type="text/template" id="my-template"> <tr> <td onclick="prop(this)" data-value="chk{id}"><input class="chk" id="chk{id}" type="checkbox" name="ids[]" value="{id}"/></td> <td class="left" onclick="prop(this)" data-value="chk{id}"> <img data-original="{gif}" alt="gif" class="lazy" style="width:160px;height:90px"/><br/> {name} </td> <td onclick="prop(this)" data-value="chk{id}">{created_at}</td> <td><a href="{url}" target="_blank"><img src="video.png" style="width:40px;height:40px;"/></a></td> </tr> </script>
text/templateを用意しておいて取得したJSONの値でreplaceしてテーブルのtbodyのおしりにつけるのですよ。
アクセス先はphpなのですけれど
header("Content-Type: application/json; charset=utf-8"); echo json_encode($result); exit;
としてやって処理を終わらせてやると良い。