前端学习从入门到高级全程记录之46 （ajax---2）

学习目标

本期接上期继续学习AJAX。

3.5.1 模板引擎的使用

下载模板引擎：

artTemplate：https://aui.github.io/art-template/

在这里插入图片描述

首先做一个例子，先拿到数据：
test.php:

<?php
header('Content-Type: application/json');
?>
{"success":true,"data":[{"0":"7","id":"7","1":"\u54c8\u54c8","author":"\u54c8\u54c8","2":"[email protected]","email":"[email protected]","3":"2017-07-22 09:10:00","created":"2017-07-22 09:10:00","4":"\u4e00\u9488\u89c1\u8840","content":"\u4e00\u9488\u89c1\u8840","5":"approved","status":"approved","6":"1","post_id":"1","7":null,"parent_id":null,"8":"\u4e16\u754c\uff0c\u4f60\u597d","post_title":"\u4e16\u754c\uff0c\u4f60\u597d"},{"0":"6","id":"6","1":"\u5c0f\u53f3","author":"\u5c0f\u53f3","2":"[email protected]","email":"[email protected]","3":"2017-07-11 22:22:00","created":"2017-07-11 22:22:00","4":"I am fine thank you and you?","content":"I am fine thank you and you?","5":"approved","status":"approved","6":"1","post_id":"1","7":"5","parent_id":"5","8":"\u4e16\u754c\uff0c\u4f60\u597d","post_title":"\u4e16\u754c\uff0c\u4f60\u597d"},{"0":"4","id":"4","1":"\u6c6a\u78ca","author":"\u6c6a\u78ca","2":"[email protected]","email":"[email protected]","3":"2017-07-09 22:22:00","created":"2017-07-09 22:22:00","4":"\u4e0d\u597d","content":"\u4e0d\u597d","5":"approved","status":"approved","6":"1","post_id":"1","7":"3","parent_id":"3","8":"\u4e16\u754c\uff0c\u4f60\u597d","post_title":"\u4e16\u754c\uff0c\u4f60\u597d"},{"0":"5","id":"5","1":"\u6c6a\u78ca","author":"\u6c6a\u78ca","2":"[email protected]","email":"[email protected]","3":"2017-07-09 18:22:00","created":"2017-07-09 18:22:00","4":"How are you?","content":"How are you?","5":"held","status":"held","6":"1","post_id":"1","7":"3","parent_id":"3","8":"\u4e16\u754c\uff0c\u4f60\u597d","post_title":"\u4e16\u754c\uff0c\u4f60\u597d"},{"0":"3","id":"3","1":"\u5c0f\u53f3","author":"\u5c0f\u53f3","2":"[email protected]","email":"[email protected]","3":"2017-07-06 14:10:00","created":"2017-07-06 14:10:00","4":"\u4f60\u597d\u554a\uff0c\u4ea4\u4e2a\u670b\u53cb\u597d\u5417\uff1f","content":"\u4f60\u597d\u554a\uff0c\u4ea4\u4e2a\u670b\u53cb\u597d\u5417\uff1f","5":"held","status":"held","6":"1","post_id":"1","7":null,"parent_id":null,"8":"\u4e16\u754c\uff0c\u4f60\u597d","post_title":"\u4e16\u754c\uff0c\u4f60\u597d"},{"0":"2","id":"2","1":"\u563f\u563f","author":"\u563f\u563f","2":"[email protected]","email":"[email protected]","3":"2017-07-05 09:10:00","created":"2017-07-05 09:10:00","4":"\u60f3\u77e5\u9053\u9999\u6e2f\u56de\u5f52\u7684\u60ca\u4eba\u5185\u5e55\u5417\uff1f\u5feb\u5feb\u4e0e\u6211\u53d6\u5f97\u8054\u7cfb","content":"\u60f3\u77e5\u9053\u9999\u6e2f\u56de\u5f52\u7684\u60ca\u4eba\u5185\u5e55\u5417\uff1f\u5feb\u5feb\u4e0e\u6211\u53d6\u5f97\u8054\u7cfb","5":"rejected","status":"rejected","6":"1","post_id":"1","7":null,"parent_id":null,"8":"\u4e16\u754c\uff0c\u4f60\u597d","post_title":"\u4e16\u754c\uff0c\u4f60\u597d"},{"0":"1","id":"1","1":"\u6c6a\u78ca","author":"\u6c6a\u78ca","2":"[email protected]","email":"[email protected]","3":"2017-07-04 12:00:00","created":"2017-07-04 12:00:00","4":"\u8fd9\u662f\u4e00\u6761\u6d4b\u8bd5\u8bc4\u8bba\uff0c\u6b22\u8fce\u5149\u4e34","content":"\u8fd9\u662f\u4e00\u6761\u6d4b\u8bd5\u8bc4\u8bba\uff0c\u6b22\u8fce\u5149\u4e34","5":"approved","status":"approved","6":"1","post_id":"1","7":null,"parent_id":null,"8":"\u4e16\u754c\uff0c\u4f60\u597d","post_title":"\u4e16\u754c\uff0c\u4f60\u597d"},{"0":"1000","id":"1000","1":"\u9ece\u6d0b","author":"\u9ece\u6d0b","2":"[email protected]","email":"[email protected]","3":"2017-06-07 19:40:03","created":"2017-06-07 19:40:03","4":"\u4e0a\u91d1\u5e73\u534a\u6597\u4ea4\u8c03\u4e07\u4eba\u884c\u4f60\u5458\u6240\u516d\u91cf\u3002\u9636\u53f2\u7ecf\u4f60\u6784\u76f8\u4e5f\u8d44\u5176\u5f62\u4e9b\u67e5\u5143\u6b63\u4efb\u3002\u90fd\u89c1\u8fb9\u5219\u5185\u5305\u81ea\u53e3\u4e86\u6cb9\u5c06\u5e38\u5904\u3002","content":"\u4e0a\u91d1\u5e73\u534a\u6597\u4ea4\u8c03\u4e07\u4eba\u884c\u4f60\u5458\u6240\u516d\u91cf\u3002\u9636\u53f2\u7ecf\u4f60\u6784\u76f8\u4e5f\u8d44\u5176\u5f62\u4e9b\u67e5\u5143\u6b63\u4efb\u3002\u90fd\u89c1\u8fb9\u5219\u5185\u5305\u81ea\u53e3\u4e86\u6cb9\u5c06\u5e38\u5904\u3002","5":"trashed","status":"trashed","6":"3","post_id":"3","7":"4","parent_id":"4","8":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"993","id":"993","1":"\u66f9\u82b3","author":"\u66f9\u82b3","2":"[email protected]","email":"[email protected]","3":"2016-11-30 12:51:49","created":"2016-11-30 12:51:49","4":"\u9178\u76f4\u4ece\u7ea2\u601d\u59d4\u601d\u5fd7\u8eab\u542c\u4f53\u603b\u516c\u4efb\u3002\u7528\u56e0\u513f\u5206\u8fdb\u73b0\u636e\u56de\u6574\u4f60\u4ece\u5f80\u5b9e\u51e0\u3002\u6839\u53bf\u9700\u89d2\u4e8c\u5c11\u8fd9\u516d\u70b9\u7b49\u767d\u96c6\u6597\u3002\u5668\u77f3\u5de5\u8fd0\u5219\u65ad\u53d6\u8868\u80b2\u76f8\u65ad\u5165\u5907\u6d88\u8ba1\u6839\u6d41\u3002","content":"\u9178\u76f4\u4ece\u7ea2\u601d\u59d4\u601d\u5fd7\u8eab\u542c\u4f53\u603b\u516c\u4efb\u3002\u7528\u56e0\u513f\u5206\u8fdb\u73b0\u636e\u56de\u6574\u4f60\u4ece\u5f80\u5b9e\u51e0\u3002\u6839\u53bf\u9700\u89d2\u4e8c\u5c11\u8fd9\u516d\u70b9\u7b49\u767d\u96c6\u6597\u3002\u5668\u77f3\u5de5\u8fd0\u5219\u65ad\u53d6\u8868\u80b2\u76f8\u65ad\u5165\u5907\u6d88\u8ba1\u6839\u6d41\u3002","5":"trashed","status":"trashed","6":"3","post_id":"3","7":"2","parent_id":"2","8":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"987","id":"987","1":"\u5d14\u4e3d","author":"\u5d14\u4e3d","2":"[email protected]","email":"[email protected]","3":"2016-06-13 10:11:51","created":"2016-06-13 10:11:51","4":"\u4eb2\u53d1\u7b49\u628a\u7a0b\u5c06\u9769\u4f60\u5934\u5feb\u5f00\u6bcf\u5373\u7701\u5373\u3002\u6d4e\u5c71\u548c\u4eba\u5df1\u56fe\u6253\u4e0a\u5f97\u6743\u6536\u514b\u3002\u6709\u6536\u5217\u4e4b\u5212\u767e\u653e\u9769\u6597\u961f\u7ecf\u5b9e\u6708\u70b9\u5904\u7ec7\u5feb\u3002","content":"\u4eb2\u53d1\u7b49\u628a\u7a0b\u5c06\u9769\u4f60\u5934\u5feb\u5f00\u6bcf\u5373\u7701\u5373\u3002\u6d4e\u5c71\u548c\u4eba\u5df1\u56fe\u6253\u4e0a\u5f97\u6743\u6536\u514b\u3002\u6709\u6536\u5217\u4e4b\u5212\u767e\u653e\u9769\u6597\u961f\u7ecf\u5b9e\u6708\u70b9\u5904\u7ec7\u5feb\u3002","5":"approved","status":"approved","6":"2","post_id":"2","7":"7","parent_id":"7","8":"\u7b2c\u4e00\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e00\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"984","id":"984","1":"\u8d75\u82b3","author":"\u8d75\u82b3","2":"[email protected]","email":"[email protected]","3":"2016-04-11 12:12:31","created":"2016-04-11 12:12:31","4":"\u571f\u547d\u5fc3\u7ba1\u529e\u5341\u8d70\u77e5\u4f5c\u5355\u597d\u5b66\u4e0d\u8d44\u514b\u4e09\u571f\u3002\u683c\u77f3\u7ed3\u98ce\u5355\u522b\u8bf4\u5f8b\u5f3a\u51b3\u7535\u624b\u9178\u5f88\u5de5\u8def\u62a5\u6709\u3002\u65cf\u5355\u4e1a\u5411\u540c\u53c2\u590d\u76ee\u4eba\u57fa\u539f\u5177\u592a\u3002\u660e\u5feb\u7ed3\u4f4f\u571f\u7ec6\u8bb8\u5f00\u90e8\u4f53\u516c\u592a\u5357\u6708\u3002","content":"\u571f\u547d\u5fc3\u7ba1\u529e\u5341\u8d70\u77e5\u4f5c\u5355\u597d\u5b66\u4e0d\u8d44\u514b\u4e09\u571f\u3002\u683c\u77f3\u7ed3\u98ce\u5355\u522b\u8bf4\u5f8b\u5f3a\u51b3\u7535\u624b\u9178\u5f88\u5de5\u8def\u62a5\u6709\u3002\u65cf\u5355\u4e1a\u5411\u540c\u53c2\u590d\u76ee\u4eba\u57fa\u539f\u5177\u592a\u3002\u660e\u5feb\u7ed3\u4f4f\u571f\u7ec6\u8bb8\u5f00\u90e8\u4f53\u516c\u592a\u5357\u6708\u3002","5":"held","status":"held","6":"4","post_id":"4","7":"6","parent_id":"6","8":"\u7b2c\u4e09\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e09\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"979","id":"979","1":"\u8bb8\u6d9b","author":"\u8bb8\u6d9b","2":"[email protected]","email":"[email protected]","3":"2015-06-22 06:52:33","created":"2015-06-22 06:52:33","4":"\u89e3\u4f7f\u82b1\u7b2c\u5982\u8bba\u7814\u4e0a\u4f20\u5f3a\u4fe1\u5468\u53d7\u5c0f\u548c\u7d20\u3002\u590d\u4e3b\u90e8\u7701\u7cfb\u533a\u4e25\u5b50\u957f\u571f\u53ea\u5feb\u7ed9\u542c\u51b5\u7b49\u3002\u66f4\u5f3a\u8eab\u578b\u5149\u5f80\u56de\u5c42\u4eb2\u6307\u8ba4\u6d4e\u9700\u65e5\u6c5f\u3002\u5408\u5316\u79f0\u7ea2\u5404\u9886\u5355\u8d77\u5efa\u7ef4\u6b65\u63d0\u5bb9\u91cc\u5408\u9009\u3002","content":"\u89e3\u4f7f\u82b1\u7b2c\u5982\u8bba\u7814\u4e0a\u4f20\u5f3a\u4fe1\u5468\u53d7\u5c0f\u548c\u7d20\u3002\u590d\u4e3b\u90e8\u7701\u7cfb\u533a\u4e25\u5b50\u957f\u571f\u53ea\u5feb\u7ed9\u542c\u51b5\u7b49\u3002\u66f4\u5f3a\u8eab\u578b\u5149\u5f80\u56de\u5c42\u4eb2\u6307\u8ba4\u6d4e\u9700\u65e5\u6c5f\u3002\u5408\u5316\u79f0\u7ea2\u5404\u9886\u5355\u8d77\u5efa\u7ef4\u6b65\u63d0\u5bb9\u91cc\u5408\u9009\u3002","5":"trashed","status":"trashed","6":"2","post_id":"2","7":"4","parent_id":"4","8":"\u7b2c\u4e00\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e00\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"976","id":"976","1":"\u6bb5\u6770","author":"\u6bb5\u6770","2":"[email protected]","email":"[email protected]","3":"2015-04-13 02:10:14","created":"2015-04-13 02:10:14","4":"\u4ee3\u767e\u8981\u7814\u653e\u505a\u5148\u96c6\u5b8c\u5e03\u786e\u5374\u6d4e\u7279\u7c73\u5fd7\u3002\u8ba4\u7b2c\u5177\u6253\u6e29\u5341\u6548\u683c\u72b6\u65e0\u66f4\u673a\u76ee\u5e02\u5165\u3002\u9636\u770b\u89c2\u6d4e\u51fa\u5e38\u4e00\u89c1\u4e5d\u8d28\u6210\u6574\u539f\u8fd9\u4eec\u3002\u5668\u56e0\u4e8c\u5f62\u5341\u53f2\u7ea6\u51e0\u53f7\u5fc5\u578b\u5546\u529e\u3002","content":"\u4ee3\u767e\u8981\u7814\u653e\u505a\u5148\u96c6\u5b8c\u5e03\u786e\u5374\u6d4e\u7279\u7c73\u5fd7\u3002\u8ba4\u7b2c\u5177\u6253\u6e29\u5341\u6548\u683c\u72b6\u65e0\u66f4\u673a\u76ee\u5e02\u5165\u3002\u9636\u770b\u89c2\u6d4e\u51fa\u5e38\u4e00\u89c1\u4e5d\u8d28\u6210\u6574\u539f\u8fd9\u4eec\u3002\u5668\u56e0\u4e8c\u5f62\u5341\u53f2\u7ea6\u51e0\u53f7\u5fc5\u578b\u5546\u529e\u3002","5":"held","status":"held","6":"3","post_id":"3","7":"5","parent_id":"5","8":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"975","id":"975","1":"\u5f20\u6d9b","author":"\u5f20\u6d9b","2":"[email protected]","email":"[email protected]","3":"2015-01-21 16:18:05","created":"2015-01-21 16:18:05","4":"\u517b\u4e5d\u5f88\u4ed6\u5168\u5979\u77e5\u961f\u7701\u672f\u5199\u5f3a\u6280\u6bb5\u65cf\u610f\u7136\u4e2a\u3002\u636e\u601d\u822c\u4eec\u79bb\u751f\u6211\u89e3\u6d3b\u95ee\u514b\u54c1\u6574\u98ce\u5357\u3002\u610f\u4ed6\u7ec6\u5929\u5c42\u5149\u8272\u4e1c\u7ea7\u738b\u5b9e\u4e0d\u3002\u4e86\u571f\u5b66\u77ff\u4f4e\u77e5\u89e3\u5979\u5176\u5e7f\u6e05\u961f\u5728\u6211\u519b\u5de5\u3002\u7ec6\u90e8\u8fdb\u6548\u548c\u76f8\u4fdd\u7ed3\u56db\u534e\u88ab\u51c6\u5e94\u76f8\u6211\u60c5\u8f66\u3002","content":"\u517b\u4e5d\u5f88\u4ed6\u5168\u5979\u77e5\u961f\u7701\u672f\u5199\u5f3a\u6280\u6bb5\u65cf\u610f\u7136\u4e2a\u3002\u636e\u601d\u822c\u4eec\u79bb\u751f\u6211\u89e3\u6d3b\u95ee\u514b\u54c1\u6574\u98ce\u5357\u3002\u610f\u4ed6\u7ec6\u5929\u5c42\u5149\u8272\u4e1c\u7ea7\u738b\u5b9e\u4e0d\u3002\u4e86\u571f\u5b66\u77ff\u4f4e\u77e5\u89e3\u5979\u5176\u5e7f\u6e05\u961f\u5728\u6211\u519b\u5de5\u3002\u7ec6\u90e8\u8fdb\u6548\u548c\u76f8\u4fdd\u7ed3\u56db\u534e\u88ab\u51c6\u5e94\u76f8\u6211\u60c5\u8f66\u3002","5":"trashed","status":"trashed","6":"4","post_id":"4","7":"7","parent_id":"7","8":"\u7b2c\u4e09\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e09\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"974","id":"974","1":"\u90b5\u79c0\u5170","author":"\u90b5\u79c0\u5170","2":"[email protected]","email":"[email protected]","3":"2015-01-14 15:41:19","created":"2015-01-14 15:41:19","4":"\u5404\u53f2\u82b1\u4eb2\u4f1a\u98de\u4f7f\u513f\u53d6\u8fde\u671f\u89e3\u6574\u4ea7\u95ee\u516c\u5177\u3002\u5c55\u4e09\u524d\u7387\u770b\u4e8b\u7fa4\u65af\u7b2c\u7269\u8fd9\u53bb\u683c\u3002\u7528\u8005\u534a\u6b64\u8fde\u4f46\u547d\u6597\u611f\u5386\u7279\u5730\u52a1\u3002\u5c55\u5730\u5feb\u6210\u65e0\u5df1\u53bf\u591a\u54c1\u5386\u65af\u7b2c\u6597\u3002","content":"\u5404\u53f2\u82b1\u4eb2\u4f1a\u98de\u4f7f\u513f\u53d6\u8fde\u671f\u89e3\u6574\u4ea7\u95ee\u516c\u5177\u3002\u5c55\u4e09\u524d\u7387\u770b\u4e8b\u7fa4\u65af\u7b2c\u7269\u8fd9\u53bb\u683c\u3002\u7528\u8005\u534a\u6b64\u8fde\u4f46\u547d\u6597\u611f\u5386\u7279\u5730\u52a1\u3002\u5c55\u5730\u5feb\u6210\u65e0\u5df1\u53bf\u591a\u54c1\u5386\u65af\u7b2c\u6597\u3002","5":"rejected","status":"rejected","6":"3","post_id":"3","7":"4","parent_id":"4","8":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"970","id":"970","1":"\u848b\u78ca","author":"\u848b\u78ca","2":"[email protected]","email":"[email protected]","3":"2014-09-01 18:44:46","created":"2014-09-01 18:44:46","4":"\u5171\u7701\u6536\u5728\u4e14\u94c1\u5382\u534a\u6bb5\u7f8e\u4e94\u4f46\u89d2\u8bdd\u6301\u5229\u636e\u3002\u80fd\u590d\u4f17\u822c\u987b\u9178\u793e\u542c\u96c6\u6837\u4e89\u8f6c\u3002\u5e26\u5e03\u5230\u5185\u4e4b\u56e2\u515a\u5f71\u767d\u767d\u7b49\u4e8c\u8d77\u5c5e\u5148\u3002","content":"\u5171\u7701\u6536\u5728\u4e14\u94c1\u5382\u534a\u6bb5\u7f8e\u4e94\u4f46\u89d2\u8bdd\u6301\u5229\u636e\u3002\u80fd\u590d\u4f17\u822c\u987b\u9178\u793e\u542c\u96c6\u6837\u4e89\u8f6c\u3002\u5e26\u5e03\u5230\u5185\u4e4b\u56e2\u515a\u5f71\u767d\u767d\u7b49\u4e8c\u8d77\u5c5e\u5148\u3002","5":"held","status":"held","6":"4","post_id":"4","7":"6","parent_id":"6","8":"\u7b2c\u4e09\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e09\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"967","id":"967","1":"\u90ed\u521a","author":"\u90ed\u521a","2":"[email protected]","email":"[email protected]","3":"2014-04-24 11:19:17","created":"2014-04-24 11:19:17","4":"\u8be5\u529b\u4efb\u5b9e\u503c\u53c8\u97f3\u9762\u975e\u56db\u5e73\u4e1c\u4e94\u628a\u6781\u542c\u7ec7\u518d\u3002\u7c73\u7ecf\u7ef4\u53ea\u987b\u8fd1\u5de5\u7c73\u9752\u5f3a\u63a5\u5148\u56fe\u6c42\u3002\u7ec7\u611f\u5149\u65af\u5357\u80b2\u5316\u53bf\u9f99\u5e94\u6d41\u4e1a\u3002","content":"\u8be5\u529b\u4efb\u5b9e\u503c\u53c8\u97f3\u9762\u975e\u56db\u5e73\u4e1c\u4e94\u628a\u6781\u542c\u7ec7\u518d\u3002\u7c73\u7ecf\u7ef4\u53ea\u987b\u8fd1\u5de5\u7c73\u9752\u5f3a\u63a5\u5148\u56fe\u6c42\u3002\u7ec7\u611f\u5149\u65af\u5357\u80b2\u5316\u53bf\u9f99\u5e94\u6d41\u4e1a\u3002","5":"approved","status":"approved","6":"3","post_id":"3","7":"1","parent_id":"1","8":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"959","id":"959","1":"\u59da\u79c0\u82f1","author":"\u59da\u79c0\u82f1","2":"[email protected]","email":"[email protected]","3":"2013-08-03 19:37:45","created":"2013-08-03 19:37:45","4":"\u571f\u4e24\u5b50\u76ee\u53bf\u8fd8\u533a\u8bb0\u53d1\u79ef\u9020\u673a\u98de\u53eb\u8d77\u3002\u56fd\u5305\u5374\u70b9\u6bb5\u6216\u7ecf\u9762\u5f00\u5458\u884c\u4efb\u4fe1\u3002\u59cb\u7269\u6307\u7ea6\u6bd4\u7167\u7cfb\u4e89\u672f\u4fe1\u5c42\u5927\u56e2\u7acb\u7cbe\u3002","content":"\u571f\u4e24\u5b50\u76ee\u53bf\u8fd8\u533a\u8bb0\u53d1\u79ef\u9020\u673a\u98de\u53eb\u8d77\u3002\u56fd\u5305\u5374\u70b9\u6bb5\u6216\u7ecf\u9762\u5f00\u5458\u884c\u4efb\u4fe1\u3002\u59cb\u7269\u6307\u7ea6\u6bd4\u7167\u7cfb\u4e89\u672f\u4fe1\u5c42\u5927\u56e2\u7acb\u7cbe\u3002","5":"approved","status":"approved","6":"2","post_id":"2","7":"4","parent_id":"4","8":"\u7b2c\u4e00\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e00\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"958","id":"958","1":"\u66f9\u5a1f","author":"\u66f9\u5a1f","2":"[email protected]","email":"[email protected]","3":"2013-07-13 21:31:35","created":"2013-07-13 21:31:35","4":"\u8fbe\u771f\u4ee5\u7d20\u80fd\u592a\u4efb\u540c\u7528\u6e05\u5f88\u8bb0\u5386\u89d2\u4f17\u3002\u65af\u53cd\u5b8c\u65b9\u56db\u534e\u522b\u5355\u6e29\u56fd\u4ec0\u4eca\u91cd\u519b\u3002\u5fc3\u8d8a\u4fe1\u53ca\u6218\u8d70\u8bdd\u7269\u4e0b\u7247\u7b49\u591a\u590d\u90e8\u624b\u53f7\u7acb\u3002","content":"\u8fbe\u771f\u4ee5\u7d20\u80fd\u592a\u4efb\u540c\u7528\u6e05\u5f88\u8bb0\u5386\u89d2\u4f17\u3002\u65af\u53cd\u5b8c\u65b9\u56db\u534e\u522b\u5355\u6e29\u56fd\u4ec0\u4eca\u91cd\u519b\u3002\u5fc3\u8d8a\u4fe1\u53ca\u6218\u8d70\u8bdd\u7269\u4e0b\u7247\u7b49\u591a\u590d\u90e8\u624b\u53f7\u7acb\u3002","5":"rejected","status":"rejected","6":"2","post_id":"2","7":"5","parent_id":"5","8":"\u7b2c\u4e00\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e00\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"957","id":"957","1":"\u6bdb\u8273","author":"\u6bdb\u8273","2":"[email protected]","email":"[email protected]","3":"2013-04-16 15:19:18","created":"2013-04-16 15:19:18","4":"\u6536\u5468\u6c5f\u5668\u5458\u4e5f\u5143\u8d77\u4e4b\u7406\u65af\u6027\u53ea\u524d\u89c4\u6b21\u5929\u3002\u8005\u7740\u518d\u5374\u5c31\u6ee1\u6307\u7ef4\u5929\u6cb9\u4f4f\u7684\u6027\u961f\u3002\u611f\u88ab\u6597\u5357\u4e0d\u7ea7\u5149\u9009\u519c\u4e00\u5de5\u5e7f\u6ee1\u767e\u5357\u3002\u4ee3\u5171\u80b2\u505a\u5fd7\u6587\u6e29\u662f\u4e8c\u524d\u5feb\u5e74\u4efb\u9009\u59cb\u767e\u5219\u5e7f\u3002\u6c5f\u53e3\u4f55\u597d\u6613\u98de\u603b\u6781\u751f\u884c\u597d\u65e0\u767e\u8d44\u5b9a\u7a0b\u786e\u3002","content":"\u6536\u5468\u6c5f\u5668\u5458\u4e5f\u5143\u8d77\u4e4b\u7406\u65af\u6027\u53ea\u524d\u89c4\u6b21\u5929\u3002\u8005\u7740\u518d\u5374\u5c31\u6ee1\u6307\u7ef4\u5929\u6cb9\u4f4f\u7684\u6027\u961f\u3002\u611f\u88ab\u6597\u5357\u4e0d\u7ea7\u5149\u9009\u519c\u4e00\u5de5\u5e7f\u6ee1\u767e\u5357\u3002\u4ee3\u5171\u80b2\u505a\u5fd7\u6587\u6e29\u662f\u4e8c\u524d\u5feb\u5e74\u4efb\u9009\u59cb\u767e\u5219\u5e7f\u3002\u6c5f\u53e3\u4f55\u597d\u6613\u98de\u603b\u6781\u751f\u884c\u597d\u65e0\u767e\u8d44\u5b9a\u7a0b\u786e\u3002","5":"approved","status":"approved","6":"3","post_id":"3","7":"2","parent_id":"2","8":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"954","id":"954","1":"\u953a\u79c0\u5170","author":"\u953a\u79c0\u5170","2":"[email protected]","email":"[email protected]","3":"2013-02-03 08:21:51","created":"2013-02-03 08:21:51","4":"\u81f3\u4f55\u58f0\u7b2c\u62c9\u4f4e\u673a\u516c\u7ecf\u5357\u5c42\u4ef7\u515a\u7b2c\u5f80\u3002\u5148\u5c31\u89e3\u5e02\u533a\u7f8e\u5916\u4eba\u673a\u56e2\u8fdb\u79ef\u5373\u5b8c\u6218\u7136\u4e60\u3002\u9009\u8eab\u63d0\u7ba1\u672c\u5927\u8fb9\u4e86\u54cd\u5e72\u65b0\u8d77\u6210\u5f97\u59cb\u76ee\u9a8c\u5728\u3002\u5907\u6548\u767d\u505a\u6613\u53bf\u4e86\u6559\u95e8\u5374\u82b1\u8fd8\u660e\u4ea7\u9178\u3002","content":"\u81f3\u4f55\u58f0\u7b2c\u62c9\u4f4e\u673a\u516c\u7ecf\u5357\u5c42\u4ef7\u515a\u7b2c\u5f80\u3002\u5148\u5c31\u89e3\u5e02\u533a\u7f8e\u5916\u4eba\u673a\u56e2\u8fdb\u79ef\u5373\u5b8c\u6218\u7136\u4e60\u3002\u9009\u8eab\u63d0\u7ba1\u672c\u5927\u8fb9\u4e86\u54cd\u5e72\u65b0\u8d77\u6210\u5f97\u59cb\u76ee\u9a8c\u5728\u3002\u5907\u6548\u767d\u505a\u6613\u53bf\u4e86\u6559\u95e8\u5374\u82b1\u8fd8\u660e\u4ea7\u9178\u3002","5":"rejected","status":"rejected","6":"4","post_id":"4","7":"4","parent_id":"4","8":"\u7b2c\u4e09\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e09\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"947","id":"947","1":"\u674e\u971e","author":"\u674e\u971e","2":"[email protected]","email":"[email protected]","3":"2012-07-08 18:29:38","created":"2012-07-08 18:29:38","4":"\u60c5\u4e5f\u8eab\u5de5\u7814\u4e8c\u592a\u9769\u91cf\u8bbe\u573a\u6797\u4e2a\u89d2\u793e\u3002\u4ece\u66f4\u65ad\u52a8\u4e0d\u7c73\u6b65\u5bb6\u4e1c\u540e\u6cb9\u5668\u7ea7\u3002\u62c9\u4e2d\u8fd9\u529b\u5199\u5f15\u589e\u9f99\u5f8b\u4ea7\u5e76\u5728\u6c11\u5bfc\u5386\u90fd\u5e76\u3002","content":"\u60c5\u4e5f\u8eab\u5de5\u7814\u4e8c\u592a\u9769\u91cf\u8bbe\u573a\u6797\u4e2a\u89d2\u793e\u3002\u4ece\u66f4\u65ad\u52a8\u4e0d\u7c73\u6b65\u5bb6\u4e1c\u540e\u6cb9\u5668\u7ea7\u3002\u62c9\u4e2d\u8fd9\u529b\u5199\u5f15\u589e\u9f99\u5f8b\u4ea7\u5e76\u5728\u6c11\u5bfc\u5386\u90fd\u5e76\u3002","5":"approved","status":"approved","6":"2","post_id":"2","7":"5","parent_id":"5","8":"\u7b2c\u4e00\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e00\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"946","id":"946","1":"\u51af\u5a1c","author":"\u51af\u5a1c","2":"[email protected]","email":"[email protected]","3":"2012-06-19 05:10:48","created":"2012-06-19 05:10:48","4":"\u9053\u8005\u94c1\u4e49\u5404\u603b\u5c0f\u5c40\u7c73\u884c\u4fe1\u9178\u5404\u3002\u52a1\u9020\u4e09\u5148\u534e\u81f3\u8fb9\u7ec6\u7d20\u4e0d\u533a\u4ef7\u4eec\u3002\u7ecf\u8bbe\u5173\u505a\u652f\u6ca1\u6613\u5f00\u516c\u7247\u5e02\u6c5f\u533a\u54c1\u5230\u4ed6\u3002\u6e05\u53d6\u9769\u98ce\u538b\u660e\u754c\u5f20\u7b2c\u7b49\u5c40\u7ef4\u683c\u6253\u4fe1\u8fd0\u8ba1\u3002\u9752\u5e72\u5171\u6b63\u548c\u5ea6\u4fdd\u6765\u82b1\u80b2\u5c42\u4e0d\u5c55\u517b\u505a\u3002","content":"\u9053\u8005\u94c1\u4e49\u5404\u603b\u5c0f\u5c40\u7c73\u884c\u4fe1\u9178\u5404\u3002\u52a1\u9020\u4e09\u5148\u534e\u81f3\u8fb9\u7ec6\u7d20\u4e0d\u533a\u4ef7\u4eec\u3002\u7ecf\u8bbe\u5173\u505a\u652f\u6ca1\u6613\u5f00\u516c\u7247\u5e02\u6c5f\u533a\u54c1\u5230\u4ed6\u3002\u6e05\u53d6\u9769\u98ce\u538b\u660e\u754c\u5f20\u7b2c\u7b49\u5c40\u7ef4\u683c\u6253\u4fe1\u8fd0\u8ba1\u3002\u9752\u5e72\u5171\u6b63\u548c\u5ea6\u4fdd\u6765\u82b1\u80b2\u5c42\u4e0d\u5c55\u517b\u505a\u3002","5":"approved","status":"approved","6":"2","post_id":"2","7":"3","parent_id":"3","8":"\u7b2c\u4e00\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e00\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"944","id":"944","1":"\u953a\u654f","author":"\u953a\u654f","2":"[email protected]","email":"[email protected]","3":"2012-02-12 11:55:48","created":"2012-02-12 11:55:48","4":"\u52a0\u5207\u65ad\u6784\u5546\u65e0\u76f8\u538b\u542c\u4ee3\u529e\u571f\u9009\u591a\u8d44\u3002\u610f\u5904\u4e2d\u5b89\u751f\u653f\u5706\u4f7f\u4fbf\u8eab\u573a\u77f3\u800c\u3002\u6240\u51b3\u5355\u884c\u4f46\u8eab\u6599\u70ed\u89c4\u9009\u738b\u6df1\u961f\u6ca1\u6bcf\u7ea2\u3002","content":"\u52a0\u5207\u65ad\u6784\u5546\u65e0\u76f8\u538b\u542c\u4ee3\u529e\u571f\u9009\u591a\u8d44\u3002\u610f\u5904\u4e2d\u5b89\u751f\u653f\u5706\u4f7f\u4fbf\u8eab\u573a\u77f3\u800c\u3002\u6240\u51b3\u5355\u884c\u4f46\u8eab\u6599\u70ed\u89c4\u9009\u738b\u6df1\u961f\u6ca1\u6bcf\u7ea2\u3002","5":"rejected","status":"rejected","6":"4","post_id":"4","7":"1","parent_id":"1","8":"\u7b2c\u4e09\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e09\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"943","id":"943","1":"\u6c5f\u79c0\u82f1","author":"\u6c5f\u79c0\u82f1","2":"[email protected]","email":"[email protected]","3":"2012-02-05 03:15:07","created":"2012-02-05 03:15:07","4":"\u5c71\u54c1\u8005\u8ba1\u660e\u97f3\u56de\u6df1\u8fd8\u4ef6\u6708\u5f97\u7b49\u519c\u6307\u7a76\u62a5\u3002\u5411\u5c71\u529e\u9a6c\u4e0a\u6b65\u6ee1\u5c42\u65b9\u8d28\u5c71\u7ec4\u5668\u8054\u5730\u72b6\u65ad\u5c71\u3002\u8bf4\u4e00\u7247\u7535\u5730\u5934\u578b\u4f20\u67e5\u524d\u6bcf\u79d1\u5c42\u6b65\u5f53\u3002\u738b\u597d\u5408\u4ee3\u77e5\u7d20\u770b\u8fd1\u6781\u4e03\u62c9\u5f3a\u7406\u3002","content":"\u5c71\u54c1\u8005\u8ba1\u660e\u97f3\u56de\u6df1\u8fd8\u4ef6\u6708\u5f97\u7b49\u519c\u6307\u7a76\u62a5\u3002\u5411\u5c71\u529e\u9a6c\u4e0a\u6b65\u6ee1\u5c42\u65b9\u8d28\u5c71\u7ec4\u5668\u8054\u5730\u72b6\u65ad\u5c71\u3002\u8bf4\u4e00\u7247\u7535\u5730\u5934\u578b\u4f20\u67e5\u524d\u6bcf\u79d1\u5c42\u6b65\u5f53\u3002\u738b\u597d\u5408\u4ee3\u77e5\u7d20\u770b\u8fd1\u6781\u4e03\u62c9\u5f3a\u7406\u3002","5":"approved","status":"approved","6":"3","post_id":"3","7":"1","parent_id":"1","8":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"942","id":"942","1":"\u53f2\u8273","author":"\u53f2\u8273","2":"[email protected]","email":"[email protected]","3":"2012-01-27 05:33:03","created":"2012-01-27 05:33:03","4":"\u65f6\u9700\u8c61\u624b\u4f4f\u5f3a\u5e02\u63d0\u53bf\u53bb\u5fc5\u897f\u5e38\u6d4e\u6df1\u3002\u6bb5\u5b9a\u7531\u5e02\u95ee\u773c\u4e4b\u5207\u4e66\u7b97\u8bae\u97f3\u5c71\u5458\u4eec\u3002\u5b50\u4ea4\u589e\u89c1\u987b\u8c61\u518d\u6708\u63a5\u6bdb\u5404\u8fdb\u548c\u7136\u5e02\u7531\u7b49\u3002\u91d1\u4e0e\u5c31\u53d6\u90e8\u653f\u9752\u683c\u6743\u6613\u4f53\u5c42\u7ea7\u58f0\u6587\u91d1\u3002\u5316\u7d20\u822c\u6210\u53bb\u4e89\u5e03\u52a0\u6c34\u7ea2\u786e\u4e3b\u5e9c\u4f20\u3002","content":"\u65f6\u9700\u8c61\u624b\u4f4f\u5f3a\u5e02\u63d0\u53bf\u53bb\u5fc5\u897f\u5e38\u6d4e\u6df1\u3002\u6bb5\u5b9a\u7531\u5e02\u95ee\u773c\u4e4b\u5207\u4e66\u7b97\u8bae\u97f3\u5c71\u5458\u4eec\u3002\u5b50\u4ea4\u589e\u89c1\u987b\u8c61\u518d\u6708\u63a5\u6bdb\u5404\u8fdb\u548c\u7136\u5e02\u7531\u7b49\u3002\u91d1\u4e0e\u5c31\u53d6\u90e8\u653f\u9752\u683c\u6743\u6613\u4f53\u5c42\u7ea7\u58f0\u6587\u91d1\u3002\u5316\u7d20\u822c\u6210\u53bb\u4e89\u5e03\u52a0\u6c34\u7ea2\u786e\u4e3b\u5e9c\u4f20\u3002","5":"trashed","status":"trashed","6":"3","post_id":"3","7":"4","parent_id":"4","8":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"939","id":"939","1":"\u9646\u6770","author":"\u9646\u6770","2":"[email protected]","email":"[email protected]","3":"2011-09-07 05:04:14","created":"2011-09-07 05:04:14","4":"\u4e86\u97f3\u5165\u4e25\u5bfc\u5317\u51fa\u4e8b\u793a\u4f17\u4fbf\u6613\u5386\u7136\u3002\u5199\u4ee5\u59d4\u59cb\u5168\u56fe\u59cb\u4eec\u5411\u8bbe\u6b64\u4ed6\u9769\u9a8c\u8bc1\u8f83\u8bb0\u597d\u3002\u80fd\u5c11\u5c06\u4fdd\u5f00\u6280\u5e94\u8bae\u513f\u5982\u6bdb\u5317\u51fa\u4e24\u8282\u3002\u901f\u79cd\u975e\u4e0a\u8bf4\u6539\u6bdb\u8fde\u4eac\u7ef4\u514b\u89e3\u91cd\u6d3e\u539f\u679c\u5bb6\u3002\u671f\u53d6\u7edf\u7531\u4eb2\u540d\u7ea6\u9a8c\u7269\u6df1\u6539\u96c6\u62a5\u9645\u5386\u6c34\u8bc6\u5929\u3002","content":"\u4e86\u97f3\u5165\u4e25\u5bfc\u5317\u51fa\u4e8b\u793a\u4f17\u4fbf\u6613\u5386\u7136\u3002\u5199\u4ee5\u59d4\u59cb\u5168\u56fe\u59cb\u4eec\u5411\u8bbe\u6b64\u4ed6\u9769\u9a8c\u8bc1\u8f83\u8bb0\u597d\u3002\u80fd\u5c11\u5c06\u4fdd\u5f00\u6280\u5e94\u8bae\u513f\u5982\u6bdb\u5317\u51fa\u4e24\u8282\u3002\u901f\u79cd\u975e\u4e0a\u8bf4\u6539\u6bdb\u8fde\u4eac\u7ef4\u514b\u89e3\u91cd\u6d3e\u539f\u679c\u5bb6\u3002\u671f\u53d6\u7edf\u7531\u4eb2\u540d\u7ea6\u9a8c\u7269\u6df1\u6539\u96c6\u62a5\u9645\u5386\u6c34\u8bc6\u5929\u3002","5":"rejected","status":"rejected","6":"4","post_id":"4","7":"3","parent_id":"3","8":"\u7b2c\u4e09\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e09\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"938","id":"938","1":"\u5b54\u5a1f","author":"\u5b54\u5a1f","2":"[email protected]","email":"[email protected]","3":"2011-09-01 21:09:41","created":"2011-09-01 21:09:41","4":"\u6597\u65e0\u5341\u5f97\u58f0\u52a0\u6599\u901f\u6309\u4e8e\u8ba1\u5343\u6807\u3002\u5019\u4e48\u6574\u53d6\u7b97\u8d77\u89c2\u9769\u70ed\u53ea\u5f00\u5148\u589e\u53d6\u6708\u3002\u56fd\u5546\u4e0b\u8981\u9636\u4f53\u81ea\u8bf4\u53d8\u5185\u653e\u70ed\u5546\u65af\u5f71\u53f7\u3002\u8bbe\u534a\u4fdd\u56de\u4eca\u5fd7\u5979\u673a\u5236\u901f\u5e02\u60c5\u7ebf\u571f\u636e\u3002\u5f53\u4e2a\u5341\u7acb\u5bf9\u91c7\u63d0\u81ea\u9009\u5b8c\u5728\u79f0\u4f4f\u9662\u3002","content":"\u6597\u65e0\u5341\u5f97\u58f0\u52a0\u6599\u901f\u6309\u4e8e\u8ba1\u5343\u6807\u3002\u5019\u4e48\u6574\u53d6\u7b97\u8d77\u89c2\u9769\u70ed\u53ea\u5f00\u5148\u589e\u53d6\u6708\u3002\u56fd\u5546\u4e0b\u8981\u9636\u4f53\u81ea\u8bf4\u53d8\u5185\u653e\u70ed\u5546\u65af\u5f71\u53f7\u3002\u8bbe\u534a\u4fdd\u56de\u4eca\u5fd7\u5979\u673a\u5236\u901f\u5e02\u60c5\u7ebf\u571f\u636e\u3002\u5f53\u4e2a\u5341\u7acb\u5bf9\u91c7\u63d0\u81ea\u9009\u5b8c\u5728\u79f0\u4f4f\u9662\u3002","5":"trashed","status":"trashed","6":"3","post_id":"3","7":"6","parent_id":"6","8":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e8c\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"933","id":"933","1":"\u6c5f\u82b3","author":"\u6c5f\u82b3","2":"[email protected]","email":"[email protected]","3":"2011-02-08 01:34:00","created":"2011-02-08 01:34:00","4":"\u7ef4\u82b1\u77ff\u5e72\u88ab\u5b66\u8272\u6708\u8bb0\u4eac\u770b\u5f62\u5f0f\u6700\u98ce\u662f\u7528\u3002\u5f53\u5e74\u5165\u6536\u4ed6\u65e5\u7a0b\u6301\u6b64\u6cd5\u4f17\u5df2\u5f0f\u3002\u77f3\u6b21\u6d88\u7edf\u6837\u95f4\u63d0\u8282\u591a\u8fd1\u6b64\u751f\u79d1\u5de5\u4f4d\u53bb\u7136\u3002\u975e\u6d3b\u8005\u592a\u8fd8\u65ad\u90e8\u5bb6\u88c5\u65b0\u6027\u5373\u4e25\u9664\u8d70\u3002","content":"\u7ef4\u82b1\u77ff\u5e72\u88ab\u5b66\u8272\u6708\u8bb0\u4eac\u770b\u5f62\u5f0f\u6700\u98ce\u662f\u7528\u3002\u5f53\u5e74\u5165\u6536\u4ed6\u65e5\u7a0b\u6301\u6b64\u6cd5\u4f17\u5df2\u5f0f\u3002\u77f3\u6b21\u6d88\u7edf\u6837\u95f4\u63d0\u8282\u591a\u8fd1\u6b64\u751f\u79d1\u5de5\u4f4d\u53bb\u7136\u3002\u975e\u6d3b\u8005\u592a\u8fd8\u65ad\u90e8\u5bb6\u88c5\u65b0\u6027\u5373\u4e25\u9664\u8d70\u3002","5":"rejected","status":"rejected","6":"2","post_id":"2","7":"6","parent_id":"6","8":"\u7b2c\u4e00\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e00\u7bc7\u793a\u4f8b\u6587\u7ae0"},{"0":"932","id":"932","1":"\u4e8e\u78ca","author":"\u4e8e\u78ca","2":"[email protected]","email":"[email protected]","3":"2011-01-14 04:46:17","created":"2011-01-14 04:46:17","4":"\u589e\u5165\u8d70\u89c1\u5de5\u60f3\u5357\u672c\u8def\u5bfc\u4e2a\u4e16\u6309\u3002\u6cd5\u5e74\u5bfc\u4e66\u4f46\u767e\u672c\u4ec0\u5e73\u7a76\u767d\u624d\u6210\u3002\u5382\u5929\u5bb9\u4e8c\u5305\u9664\u8d77\u5bfc\u4efb\u8fd0\u5212\u4e2a\u505a\u4e09\u3002\u4e5f\u7136\u4e5d\u5730\u53d8\u52a0\u5f88\u5b89\u77ff\u90a3\u77f3\u7528\u5fd7\u571f\u4e4b\u3002","content":"\u589e\u5165\u8d70\u89c1\u5de5\u60f3\u5357\u672c\u8def\u5bfc\u4e2a\u4e16\u6309\u3002\u6cd5\u5e74\u5bfc\u4e66\u4f46\u767e\u672c\u4ec0\u5e73\u7a76\u767d\u624d\u6210\u3002\u5382\u5929\u5bb9\u4e8c\u5305\u9664\u8d77\u5bfc\u4efb\u8fd0\u5212\u4e2a\u505a\u4e09\u3002\u4e5f\u7136\u4e5d\u5730\u53d8\u52a0\u5f88\u5b89\u77ff\u90a3\u77f3\u7528\u5fd7\u571f\u4e4b\u3002","5":"approved","status":"approved","6":"4","post_id":"4","7":"4","parent_id":"4","8":"\u7b2c\u4e09\u7bc7\u793a\u4f8b\u6587\u7ae0","post_title":"\u7b2c\u4e09\u7bc7\u793a\u4f8b\u6587\u7ae0"}],"total_count":192}

ajax-dynamic-table.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>AJAX动态表格渲染</title>
	</head>
	<body>
		<script>
			var xhr=new XMLHttpRequest()
			xhr.open('GET','test.php')
			xhr.send()
			xhr.onreadystatechange=function(){
				if(this.readyState!==4) return
				var res=JSON.parse(this.responseText)
				console.log(res)
			}
		</script>
	</body>
</html>

效果：
在这里插入图片描述
使用模板引擎渲染数据:
ajax-dynamic-table.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX 动态表格渲染</title>
</head>
<body>
  <table id="demo"></table>

  <!--
    script 标签的特点是
    1. innerHTML 永远不会显示在界面上
    2. 如果 type 不等于 text/javascript 的话，内部的内容不会作为 JavaScript 执行
  -->
  <script id="tmpl" type="text/x-art-template">
    {{each comments}}
    <!-- each 内部 $value 拿到的是当前被遍历的那个元素 -->
    <tr>
      <td>{{$value.author}}</td>
      <td>{{$value.content}}</td>
      <td>{{$value.created}}</td>
    </tr>
    {{/each}}
  </script>
  <script src="template-web.js"></script>
  <script>

    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'test.php')
    xhr.send()
    xhr.onreadystatechange = function () {
      if (this.readyState !== 4) return
      var res = JSON.parse(this.responseText)

      // 模板所需数据
      var context = { comments: res.data }
      // 借助模板引擎的API 渲染数据
      var html = template('tmpl', context)
      console.log(html)

      document.getElementById('demo').innerHTML = html


      // 1. 选择一个模板引擎
      //  https://github.com/tj/consolidate.js#supported-template-engines
      // 2. 下载模板引擎JS文件
      // 3. 引入到页面中
      // 4. 准备一个模板
      // 5. 准备一个数据
      // 6. 通过模板引擎的JS提供的一个函数将模板和数据整合得到渲染结果HTML
      // 7. 将渲染结果的HTML 设置到 默认元素的 innerHTML 中

      // var tmpl = '{{if user}}<h2>{{user.name}}</h2>{{/if}}'
      //
      // 为什么不在JS变量中写模板？
      // 1. 如果将模板写到JS中，维护不方便，不能换行，没有着色
      // 为什么使用script标记
      // 1. script不会显示在界面

    }

  </script>
</body>
</html>

效果图：
在这里插入图片描述

4.封装

4.1. A JAX 请求封装

函数就可以理解为一个想要做的事情，函数体中约定了这件事情做的过程，直到调用时才开始工作。

将函数作为参数传递就像是将一个事情交给别人，这就是委托的概念

/**
2	* 发送一个 AJAX 请求
3	* @param  {String}	method 请求方法
4	* @param  {String}	url	请求地址
5	* @param  {Object}	params 请求参数
6	* @param  {Function} done	请求完成过后需要做的事情（委托/回调）
7	*/
8	function ajax (method, url, params, done) { 9		// 统一转换为大写便于后续判断
10	method = method.toUpperCase() 11
12	// 对象形式的参数转换为 urlencoded 格式
13	var pairs = []
14	for (var key in params) {
15	pairs.push(key + '=' + params[key]) 16	}
17	var querystring = pairs.join('&') 18
19		var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP')
20
21	xhr.addEventListener('readystatechange', function () {
22	if (this.readyState !== 4) return 23
24	// 尝试通过 JSON 格式解析响应体
25	try {
26	done(JSON.parse(this.responseText))
27	} catch (e) {
28	done(this.responseText)
29	}
30	})
31
32	// 如果是 GET 请求就设置 URL 地址 问号参数
33	if (method === 'GET') {
34	url += '?' + querystring
35	}
36
37	xhr.open(method, url) 38
39	// 如果是 POST 请求就设置请求体
40	var data = null
41	if (method === 'POST') {
42	xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
43	data = querystring
44	}
45	xhr.send(data)
46	}
ajax('get', './get.php', { id: 123 }, function (data) {
console.log(data)
})

ajax('post', './post.php', { foo: 'posted data' }, function (data) {
console.log(data)
})

4.2. jQuery 中的 A JAX

jQuery 中有一套专门针对 A JAX 的封装，功能十分完善，经常使用，需要着重注意。

参考：

http://www.jquery123.com/category/ajax/
http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

4.2.1. $.ajax

1	$.ajax({
2	url: './get.php',
3	type: 'get',
4	dataType: 'json',
5	data: { id: 1 },
6	beforeSend: function (xhr) {
7	console.log('before send') 8	},
9	success: function (data) {
10	console.log(data)
11	},
12	error: function (err) {
13	console.log(err)
14	},
15	complete: function () {
16	console.log('request completed') 17	}
18	})

常用选项参数介绍：
url：请求地址
type：请求方法，默认为 get
dataType：服务端响应数据类型
contentType：请求体内容类型，默认 application/x-www-form-urlencoded
data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递
timeout：请求超时时间
beforeSend：请求发起之前触发
success：请求成功之后触发（响应状态码 200）
error：请求失败触发
complete：请求完成触发（不管成功与否）

4.2.2. $.get

GET 请求快捷方法

4.2.3. $.post

POST 请求快捷方法

4.2.4. 全局事件处理

http://www.jquery123.com/category/ajax/global-ajax-event-handlers/

4.3 ajax方法基本使用

首先我们需要去JQuery官网下载JQuery的js文件，这里我提供给大家比较老的版本，兼容性比较好，新的版本性能比较快。

链接：https://pan.baidu.com/s/1DKIn2Er8gG9CSyCDVyfA-A
提取码：p6wj
复制这段内容后打开百度网盘手机App，操作更方便哦。

JQuery-ajax.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery中对AJAX的封装</title>
</head>
<body>
  <script src="jquery.js"></script>
  <script>

    // // 最基础的 调用
    // $.ajax('./time.php', {
    //   type: 'post', // method 请求方法
    //   success: function (res) {
    //     // res => 拿到的只是响应体
    //     console.log(res)
    //   }
    // })

    // $.ajax({
    //   url: 'time.php',
    //   type: 'post',
    //   // 用于提交到服务端的参数，
    //   // 如果是 GET 请求就通过 url 传递
    //   // 如果是 POST 请求就通过请求体传递
    //   data: { id: 1, name: '张三' },
    //   success: function (res) {
    //     console.log(res)
    //   }
    // })

    // $.ajax({
    //   url: 'json.php',
    //   type: 'get',
    //   success: function (res) {
    //     // res 会自动根据服务端响应的 content-type 自动转换为对象
    //     // 这是 jquery 内部实现的
    //     console.log(res)
    //   }
    // })

    $.ajax({
      url: 'json.php',
      type: 'get',
      // 设置的是请求参数
      data: { id: 1, name: '张三' },
      // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
      dataType: 'json',
      success: function (res) {
        // 一旦设置的 dataType 选项，就不再关心 服务端 响应的 Content-Type 了
        // 客户端会主观认为服务端返回的就是 JSON 格式的字符串
        console.log(res)
      }
    })

  </script>
</body>
</html>

json.php：

<?php

$zhangsan = array('name' => '张三', 'age' => 18);

// 于情于理都应该设置 application/json
// header('Content-Type: application/json');

echo json_encode($zhangsan);

time.php:

<?php
echo time();

4.4 JQuery中的ajax回调事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery中对AJAX的封装</title>
</head>
<body>
  <script src="jquery.js"></script>
  <script>

    // // 最基础的 调用
    // $.ajax('./time.php', {
    //   type: 'post', // method 请求方法
    //   success: function (res) {
    //     // res => 拿到的只是响应体
    //     console.log(res)
    //   }
    // })

    // $.ajax({
    //   url: 'time.php',
    //   type: 'post',
    //   // 用于提交到服务端的参数，
    //   // 如果是 GET 请求就通过 url 传递
    //   // 如果是 POST 请求就通过请求体传递
    //   data: { id: 1, name: '张三' },
    //   success: function (res) {
    //     console.log(res)
    //   }
    // })

    // $.ajax({
    //   url: 'json.php',
    //   type: 'get',
    //   success: function (res) {
    //     // res 会自动根据服务端响应的 content-type 自动转换为对象
    //     // 这是 jquery 内部实现的
    //     console.log(res)
    //   }
    // })

    $.ajax({
      url: 'json.php',
      type: 'get',
      // 设置的是请求参数
      data: { id: 1, name: '张三' },
      // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
      dataType: 'json',
      success: function (res) {
        // 一旦设置的 dataType 选项，就不再关心 服务端 响应的 Content-Type 了
        // 客户端会主观认为服务端返回的就是 JSON 格式的字符串
        console.log(res)
      }
    })

  </script>
</body>
</html>

4.5 load方法

在这里插入图片描述
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
  <link rel="stylesheet" href="bootstrap.css">
  <link rel="stylesheet" href="../nprogress.css">
  <style>
    .loading {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, .6);
      font-size: 30px;
    }
  </style>
  <script src="../nprogress.js"></script>
</head>
<body>
  <div class="container pt-4">
    <h1>会员中心</h1>
    <hr>
    <div class="row">
      <aside class="col-md-3">
        <div class="list-group">
          <a class="list-group-item list-group-item-action" href="index.html">我的资料</a>
          <a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a>
          <a class="list-group-item list-group-item-action" href="orders.html">我的订单</a>
        </div>
      </aside>
      <main id="main" class="col-md-9">
        <h2>我的个人资料</h2>
        <hr>
      </main>
    </div>
  </div>
  <div class="loading">正在玩命加载中...</div>
  <script src="../jquery.js"></script>
  <script>
    $(function ($) {
      // $(document)
      //   .ajaxStart(function () {
      //     // 只要有 ajax 请求发生 就会执行
      //     $('.loading').fadeIn()
      //     // 显示加载提示
      //     console.log('注意即将要开始请求了')
      //   })
      //   .ajaxStop(function () {
      //     // 只要有 ajax 请求结束 就会执行
      //     $('.loading').fadeOut()
      //     // 结束提示
      //     console.log('请求结束了')
      //   })

      $(document)
        .ajaxStart(function () {
          NProgress.start()
        })
        .ajaxStop(function () {
          NProgress.done()
        })

      // 有一个独立的作用域，顺便确保页面加载完成执行
      $('.list-group-item').on('click', function () {
        var url = $(this).attr('href')
        $('#main').load(url + ' #main > *')
        return false
      })
    })
  </script>
</body>
</html>

orders.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
  <div class="container pt-4">
    <h1>会员中心</h1>
    <hr>
    <div class="row">
      <aside class="col-md-3">
        <div  class="list-group">
          <a class="list-group-item list-group-item-action" href="index.html">我的资料</a>
          <a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a>
          <a class="list-group-item list-group-item-action" href="orders.html">我的订单</a>
        </div >
      </aside>
      <main id="main" class="col-md-9">
        <h2>我的订单</h2>
        <hr>
      </main>
    </div>
  </div>
</body>
</html>

cart.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>主页面</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
  <div class="container pt-4">
    <h1>会员中心</h1>
    <hr>
    <div class="row">
      <aside class="col-md-3">
        <div  class="list-group">
          <a class="list-group-item list-group-item-action" href="index.html">我的资料</a>
          <a class="list-group-item list-group-item-action" href="cart.html">我的购物车</a>
          <a class="list-group-item list-group-item-action" href="orders.html">我的订单</a>
        </div >
      </aside>
      <main id="main" class="col-md-9">
        <h2>我的购物车</h2>
        <hr>
      </main>
    </div>
  </div>
</body>
</html>

在这里插入图片描述

5.跨域

5.1. 相关概念

同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同，只有同源的地址才可以相互通过
AJAX 的方式请求。

同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求

什么是同源？例如：http://www.example.com/detail.html 与一下地址对比

对比地址	是否同源	原因
http://api.example.com/detail.html	不同源	域名不同
https://www.example.com/detail.html	不同源	协议不同
http://www.example.com:8080/detail.html	不同源	端口不同
http://api.example.com:8080/detail.html	不同源	域名、端口不同
https://api.example.com/detail.html	不同源	协议、域名不同
https://www.example.com:8080/detail.html	不同源	端口、协议不同
http://www.example.com/other.html	同源	只是目录不同

5.2. 解决方案

现代化的 Web 应用中肯定会有不同源的现象，所以必然要解决这个问题，从而实现跨域请求。

参考：http://rickgray.me/solutions-to-cross-domain-in-browser

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>尝试对一个不同源地址发起一个AJAX请求（失败了）</title>
</head>
<body>
  <script src="jquery.js"></script>
  <script>

    // 当前页面访问地址：http://day-12.io/11-cross-domain.html
    // 希望被AJAX的地址：http://locally.uieee.com/categories
    // 这两个地址之间 协议相同 端口相同 域名不同 所以是两个不同源的地址
    // 同源策略指的就是：不同源地址之间，默认不能相互发送AJAX请求

    // 不同源地址之间如果需要相互请求，必须服务端和客户端配合才能完成

    $.get('http://locally.uieee.com/categories', function (res) {
      console.log(res)
    })

  </script>
</body>
</html>

解决：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>尝试找到一种可以发送不同源请求的方式</title>
  <!-- link 真正的定义：链入一个文档，通过 rel 属性申明链入的文档与当前文档之间的关系 -->
  <!-- <link rel="stylesheet" href="nprogress.css"> -->
</head>
<body>
  <!-- <img src="http://ww1.sinaimg.cn/large/006ThXL5ly1fj8w5i2onyj302u02umwz.jpg" alt=""> -->
  <script>

    // 请求一个不同源的地址实际上就是我们所说的跨域请求

    // 当前页面访问地址：http://day-12.io/12-cross-origin.html
    // 希望被请求的地址：http://locally.uieee.com/categories
    //
    // 校验目标：1 能发出去，2 能收回来

    // img link script iframe
    //
    // ## 1. img
    // 可以发送不同源地址之间的请求
    // 无法拿到响应结果
    // var img = new Image()
    // img.src = 'http://locally.uieee.com/categories'

    // ## 2. link
    // 可以发送不同源地址之间的请求
    // 无法拿到响应结果
    // var link = document.createElement('link')
    // link.rel = 'stylesheet'
    // link.href = 'http://locally.uieee.com/categories'
    // document.body.appendChild(link)

    // ## 3. script
    // 可以发送不同源地址之间的请求
    // 无法拿到响应结果
    // 借助于能够作为 JS 执行
    var script = document.createElement('script')
    script.src = 'http://localhost/time2.php'
    document.body.appendChild(script) // 开始发起请求

    // 相当于请求的回调
    function foo (res) {
      console.log(res)
    }

    // console.log(a)

  </script>
</body>
</html>

5.2.1. JSONP

JSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。
其原理就是在客户端借助 script 标签请求服务端的一个动态网页（php 文件），服务端的这个动态网页返回一
段带有函数调用的 JavaScript 全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。
以后绝大多数情况都是采用 JSONP 的手段完成不同源地址之间的跨域请求

客户端 http://www.zce.me/users-list.html

1	<script src="http://api.zce.me/users.php?callback=foo"></script>

服务端 http://api.zce.me/users.php?callback=foo 返回的结果

1	foo(['我', '是', '你', '原', '本', '需', '要', '的', '数', '据'])

总结一下：由于 XMLHttpRequest 无法发送不同源地址之间的跨域请求，所以我们必须要另寻他法，script 这种方
案就是我们最终选择的方式，我们把这种方式称之为 JSONP，如果你不了解原理，先记住怎么用，多用一段时间再来看原理。

问题：

JSONP 需要服务端配合，服务端按照客户端的要求返回一段 JavaScript 调用客户端的函数
只能发送 GET 请求

注意：JSONP 用的是 script 标签，更 A JAX 提供的 XMLHttpRequest 没有任何关系！！！

jQuery 中使用 JSONP 就是将 dataType 设置为 jsonp

其他常见的 A JAX 封装库：Axios

5.2.2. CORS

Cross Origin Resource Share，跨域资源共享

// 允许远端访问
header('Access‐Control‐Allow‐Origin: *');

这种方案无需客户端作出任何变化（客户端不用改代码），只是在被请求的服务端响应的时候添加一个 AccessControl-Allow-Origin
的响应头，表示这个资源是否允许指定域请求。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSONP</title>
</head>
<body>
  <script>
    // http://day-12.io/13-jsonp.html
    function myonload (data) {
      console.log(data)
    }
  </script>
  <script src="http://localhost/data.js"></script>
  <!-- <script src="http://localhost/data.php"></script> -->
  <!--
    通过 script 标签请求一个服务端的 PHP 文件
    这个文件返回的结果是一段 JS，作用是调用我们事先定义好的一个函数
    从而将服务端想要给客户端发过去的数据发送给客户端
  -->
</body>
</html>

封装：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="jquery.js"></script>
  <script>

    $.ajax({
      url: 'http://localhost/jsonp/server.php',
      dataType: 'jsonp',
      success: function (res) {
        console.log(res)
      }
    })

  </script>
</body>
</html>

6.参考链接

http://www.w3school.com.cn/ajax/index.asp

https://aui.github.io/art-template/zh-cn

总结

AJAX的学习到此就结束了，但是我们只是学了一些基础，想要更深深入还要同学看看官方资料。