$.ajax中dataType: 'jsonp'的说明
http://www.usport.cc/ajax/expertlist/lists/1/16/0 地址访问
ajax数据
({"html":"
\n \t
\n \t
\n \t\"\u5154\u5b50\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u5154\u5b50<\/a>5U\u4f53\u80b2\u4e13\u680f\u4f5c\u5bb6<\/div>\n
\u53d1\u8868\u4e86 108<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 63070<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u610f\u5927\u5229VS\u82f1\u683c\u5170:\u4e09\u72ee\u9996\u53d1\u5206\u6790 \u51ef\u6069\u9c81\u5c3c\u7ec4\u53cc\u7bad\u5934<\/a><\/li>\n \t
6\u5c04\u95e81\u74032\u4e2d\u6a2a\u6881 \u7f57\u4f0a\u65af\u518d\u626e\u5173\u952e\u5148\u751f<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u859b\u8363\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u859b\u8363<\/a>5U\u4f53\u80b2\u4e13\u680f\u4f5c\u5bb6 \u81ea\u7531\u5a92\u4f53\u4eba<\/div>\n
\u53d1\u8868\u4e86 62<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 45288<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u52c7\u58eb\u8dd1\u8f70\u96be\u8fc7\u9a91\u58eb\u9632\u5b88\u94c1\u95f8 \u8fdb\u653b\u5355\u4e00\u4e09\u5206\u4e71\u6295\u5df2\u88ab\u903c\u75af<\/a><\/li>\n \t
NBA\u624b\u672f\u5200:\u9a91\u58ebG3\u9700\u5148\u53d1\u5236\u4eba \u4e8c\u6b21\u8fdb\u653b\u6709\u5f85\u6539\u5584\u52a0\u5f3a<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u674e\u4e00\u5343\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u674e\u4e00\u5343<\/a>5U\u4f53\u80b2\u526f\u4e3b\u7f16<\/div>\n
\u53d1\u8868\u4e86 58<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 1503<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u72ec\u5bb6\u8bc4:\u5e7f\u4e1c\u5df2\u5982\u8001\u72d7 \u8f93\u5317\u4eac\u522b\u518d\u627e\u88c1\u5224\u505a\u6321\u7bad\u724c<\/a><\/li>\n \t
\u4e07\u4e07\u6ca1\u60f3\u5230\u4e4bNBA\u5168\u660e\u661f\u795e\u5267\u672c \u683c\u91cc\u82ac\u5f53\u6170\u5b89\u5987<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u6210\u8d25\u4e0d\u7b11\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u6210\u8d25\u4e0d\u7b11<\/a><\/div>\n
\u53d1\u8868\u4e86 39<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 29272<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u706b\u7bad\u6b62\u897f\u51b3\u8bc1\u660e\u54c8\u767b\u975e\u79d1\u8a79\u5f0f\u5de8\u661f \u522b\u518d\u62ff\u63a7\u536b\u5f53\u906e\u7f9e\u5e03<\/a><\/li>\n \t
\u706b\u7bad\u5df2\u5230\u56de\u5149\u8fd4\u7167\uff1f\u51b0\u7bb1\u653e\u7535\u4ee5\u6bd2\u653b\u6bd2\u6216\u53ef\u518d\u8d62\u4e00\u573a<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u5a49\u7ea6\u4e91\u513f\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u5a49\u7ea6\u4e91\u513f<\/a>\u4f53\u80b2\u540d\u535a \u81ea\u7531\u5a92\u4f53\u4eba<\/div>\n
\u53d1\u8868\u4e86 35<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 6565<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u6367\u676f\u65f6\u523b\u5207\u5c14\u897f\u56db\u608d\u5c06\u6210\u5173\u952e<\/a><\/li>\n \t
\u5b63\u540e\u8d5b\u9996\u80dc\u540e\u9a91\u58eb\u9700\u505a\u8db3\u4e00\u70b9<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u6797\u5c0f\u660e\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u6797\u5c0f\u660e<\/a>5U\u4f53\u80b2\u4e13\u680f\u4f5c\u5bb6 \u81ea\u7531\u5a92\u4f53\u4eba<\/div>\n
\u53d1\u8868\u4e86 32<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 6464<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u745e\u6069\u804a\u8f6c\u4f1a\u7b2c3\u671f:\u6807\u738b\u6700\u70ed\u4e4b\u9009! \u535a\u683c\u5df4\u4eca\u590f\u53bb\u5411\u5927\u731c\u60f3<\/a><\/li>\n \t
NBA\u603b\u51b3\u8d5b\u7ec8\u6781\u5bf9\u51b3 \u52c7\u58ebPK\u9a91\u58eb\u8c01\u5c06\u767b\u9876\u603b\u51a0\u519b?<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u6d2a\u5e84\u5148\u751f\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u6d2a\u5e84\u5148\u751f<\/a>\u65b0\u6d6a\u540d\u535a<\/div>\n
\u53d1\u8868\u4e86 18<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 13201<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u6b27\u6587\u5316\u8eab\u5510\u4f2f\u864e \u5361\u54c7\u4f0a\u53d7\u4e86\u8a79\u59c6\u65af\u7684\u6bd2<\/a><\/li>\n \t
\u79d1\u6bd4\u548c\u7eb3\u4ec0\u7684\u201c\u66f4\u5e74\u671f\u201d\u6765\u4e34<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u76db\u50b2Dribbeln\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u76db\u50b2Dribbeln<\/a>\u81ea\u7531\u5a92\u4f53\u4eba 5U\u4f53\u80b2\u4e13\u680f\u4f5c\u5bb6<\/div>\n
\u53d1\u8868\u4e86 17<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 17669<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u6052\u5927\u4ece\u6297\u65e5\u82f1\u96c4\u5230\u4eba\u89c1\u4eba\u6b3a<\/a><\/li>\n \t
\u8d1d\u5c14\u590d\u6d3b\u5df4\u8428\u98a4\u6296\u4e86\u5417\uff1f<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u82cf\u7fa4\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u82cf\u7fa4<\/a>\u8457\u540d\u7bee\u7403\u8bc4\u8bba\u5458 \u8bb0\u8005<\/div>\n
\u53d1\u8868\u4e86 16<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 5650<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u62a2\u4e03\u4e43\u56e2\u961f\u51b3\u6218 \u706b\u7bad\u66ff\u8865\u9700\u8981\u66f4\u52a0\u81ea\u4fe1<\/a><\/li>\n \t
\u52c7\u58eb\u5fc5\u987b\u201c\u706b\u201d\u8d77\u6765<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u738b\u6653\u8273\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u738b\u6653\u8273<\/a>5U\u4f53\u80b2\u4e13\u680f\u4f5c\u5bb6<\/div>\n
\u53d1\u8868\u4e86 14<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 1811<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u6b27\u51a0\u5df4\u585e\u7f57\u90a3VS\u66fc\u57ce\u524d\u77bb<\/a><\/li>\n \t
\u6b27\u51a0\u9a6c\u7adeVS\u52d2\u6c83\u5e93\u68ee\u524d\u77bb<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u4e8e\u9633\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u4e8e\u9633<\/a>5U\u4f53\u80b2\u4e13\u680f\u4f5c\u5bb6 \u81ea\u7531\u5a92\u4f53\u4eba<\/div>\n
\u53d1\u8868\u4e86 12<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 13512<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u6768\u65ed\u81ea\u4fe1\u4e0e\u90dc\u6797\u642d\u6863\u662f\u56fd\u5185\u6700\u5f3a\u7ec4\u5408<\/a><\/li>\n \t
\u83ab\u62c9\u5854\u6a2a\u7a7a\u51fa\u4e16\u625b\u8d77\u5c24\u6587\u56fe\u65af<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u4e91\u6d77\u4e4b\u95f4\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u4e91\u6d77\u4e4b\u95f4<\/a>\u65b0\u6d6a\u540d\u535a<\/div>\n
\u53d1\u8868\u4e86 11<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 24639<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u5a01\u5c11\u82e6\u6f14\u62fc\u547d\u4e09\u90ce \u7f3a\u675c\u5170\u7279\u96be\u6491\u96f7\u9706<\/a><\/li>\n \t
\u9a91\u58eb\u5316\u5b66\u53cd\u5e94\u5b8c\u7f8e \u78e8\u5408\u5c06\u8fdb\u5165\u8fd0\u7528\u671f<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u9ece\u53cc\u5bcc\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u9ece\u53cc\u5bcc<\/a>\u65b0\u6d6a\u540d\u535a \u81ea\u7531\u5a92\u4f53\u4eba<\/div>\n
\u53d1\u8868\u4e86 9<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 4505<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
NBA\u4e50\u900f\u62bd\u7b7e\u7684\u524d\u4e16\u4eca\u751f<\/a><\/li>\n \t
\u9ece\u53cc\u5bcc:\u76ae\u5c14\u65af\u7206\u5185\u5e55 \u4f9d\u65e7\u4e0d\u723d\u8a79\u59c6\u65af<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u6731\u5f66\u7855\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u6731\u5f66\u7855<\/a>\u8457\u540d\u7bee\u7403\u8bc4\u8bba\u5458<\/div>\n
\u53d1\u8868\u4e86 9<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 61<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u6731\u5f66\u7855:\u6c38\u8fdc\u4e0d\u4f1a\u88ab\u7406\u89e3\u7684\u88c1\u5224<\/a><\/li>\n \t
\u4e00\u4e07\u6b21\u52a9\u653b\uff0c\u65e0\u5c3d\u7684\u611f\u52a8<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u5f20\u658c\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u5f20\u658c<\/a>\u4e2d\u592e\u7535\u89c6\u53f0\u98ce\u4e91\u8db3\u7403\u9891\u9053\u603b\u76d1<\/div>\n
\u53d1\u8868\u4e86 8<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 2<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u5df4\u8428\u5f0f\u6c11\u4e3b\u2014\u2014\u200b\u4e00\u4eba\u4e00\u7968 \u9009\u597d\u4e3b\u5e2d<\/a><\/li>\n \t
\u66fc\u8054\u9635\u4e2d\u7684\u4e24\u4e2a\u201c\u5929\u4f7f\u201d<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
\n \t
\n \t\"\u5f3a\u54e5\u8bf4\u4e8b\"<\/a>\n +\u5173\u6ce8\u8ba2\u9605<\/a>\n <\/div>\n
\n \t
\u5f3a\u54e5\u8bf4\u4e8b<\/a>\u65b0\u6d6a\u540d\u535a<\/div>\n
\u53d1\u8868\u4e86 7<\/font> \u7bc7\u6587\u7ae0<\/span>\u62e5\u6709\u4e86 0<\/font> \u4e2a\u8bfb\u8005<\/span><\/div>\n
\n \t
\n \t \t
\u8a79\u59c6\u65af\u62ff\u9876\u85aa\u53ef\u6548\u4eff\u6e56\u4eba\u79d1\u6bd4\uff01<\/a><\/li>\n \t
\u675c\u5170\u7279\u4f55\u65f6\u80fd\u8d85\u8d8a\u8a79\u59c6\u65af\uff1f<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n \t
<\/div>\n <\/div>\n
1<\/span> 2<\/a>\n3<\/a>\n\u4e0b\u4e00\u9875<\/a>\n<\/div><\/div>"})
HTML结构为：
<div class="tab_content all active"> <!--内容区域 start--> <div class="columnist"> <!--循环 start--> <div class="columnistA"> <div class="fl columnistImg"><a href="/expert/2701" target="_blank" title="杨毅"><img src="http://discuz.usport.cc/uc_server/avatar.php?uid=2300&size=big" width="135" height="135" title="杨毅" alt="杨毅"></a><a href="http://www.usport.cc/member/?referer=www.usport.cc/expert" title="关注订阅" class="addSub">+关注订阅</a></div> </div> <!--循环 end--> </div> <!--内容区域 end--> <!--分页 sstart--> <div class="page"> <div id="pages" class="pages"> <a data-page="1" data-pagesize="16" data-userid="0" data-type="" href="javascript:void(0)">上一页</a> <a data-page="1" data-pagesize="16" data-userid="0" data-type="" href="javascript:void(0)">1</a> <span>2</span> <a data-page="3" data-pagesize="16" data-userid="0" data-type="" href="javascript:void(0)">3</a> <a data-page="3" data-pagesize="16" data-userid="0" data-type="" href="javascript:void(0)">下一页</a> </div> </div> <!--分页 end--> </div>
一种格局是以分页形式ajax加载内容，中间的内容只是固定16个
JS代码为：
$(function(){ var $ajaxurl = $('#ajaxurl').attr('data-url'); $('#views_content').on('click', 'div.page a', function() { var page = $(this).attr('data-page'); var pagesize = $(this).attr('data-pagesize'); var userid = $(this).attr('data-userid'); var type = $(this).attr('data-type'); ajaxpage(page, pagesize, userid, type); }); function ajaxpage(page, pagesize, userid, type) { page = page || 2; pagesize = pagesize || 16; type = type || ''; _userid = userid || 0; var url = $ajaxurl + '/expertlist/lists/' + page + '/' + pagesize + '/' + _userid; if (type) url = url + '/' + type; $.ajax({ url: url, type: 'GET', dataType: 'jsonp', success: function(data) { $('div.tab_content.active').html(data.html); }, error: function(data, s) { console.log(JSON.stringify(s)); } }); } });
文件可查看static中
