PHP 加载更多内容：使用 AJAX 异步查询数据库实现动态加载

要\u5728\u5185\u90e8\u8fdb\u884c\u6570\u636e\u5e93\u67e5\u8be2\u5e76\u5b9e\u73b0\u70b9\u51fb\u66f4\u591a\u52a0\u8f7d\u66f4\u591a\u5185\u5bb9\u7684\u529f\u80fd\uff0c\u4f60\u9700\u8981\u4f7f\u7528\u5149\u901a\u6587\u672c\u65b9\u6cd5\uff08AJAX\uff09\u6765\u5b9e\u73b0\u4e0d\u540c\u6b65\u6570\u52a0\u8f7d\u6570\u636e\u3002\n\n\u9996\u5148\uff0c\u521b\u5efa\u4e00\u4e2a\u6570\u636e\u5e93\u8fde\u63a5\u5e76\u67e5\u8be2\u8981\u52a0\u8f7d\u7684\u6570\u636e\u3002\u5047\u8bbe\u4f60\u6709\u4e00\u4e2a\u540d\u4e3a\u201c\u6587\u7ae0\u201d\u7684\u8868\uff0c\u5176\u4e2d\u5305\u542b\u6587\u7ae0\u7684\u6807\u9898\u548c\u5185\u5bb9\u3002\n\nphp\n<?php\n// \u521b\u5efa\u6570\u636e\u5e93\u8fde\u63a5\n\$servername \u003d \'localhost\';\n\$username \u003d \'username\';\n\$password \u003d \'password\';\n\$dbname \u003d \'database\';\n\n\$conn \u003d\u00a0new mysqli(\$servername, \$username, \$password, \$dbname);\n\n// \u68c0\u67e5\u8fde\u63a5\u662f\u5426\u6210\u529f\n\u5982\u679c (\$conn->connect_error) {\n\u00a0die(\'\u8fde\u63a5\u5931\u8d25: \' . \$conn->connect_error);\n}\n\n// \u67e5\u8be2\u6570\u636e\n\$sql \u003d \'SELECT title, content FROM articles LIMIT 10\'; // \u9650\u5236\u6bcf\u6b21\u52a0\u8f7d10\u6761\u6570\u636e\n\$result \u003d \$conn->query(\$sql);\n\n// \u5c06\u7ed3\u679c\u5b58\u50a8\u5728\u6570\u7ec4\u4e2d\n\$articles \u003d array();\n\u5982\u679c (\$result->num_rows > 0) {\n\u00a0while (\$row \u003d \$result->fetch_assoc()) {\n\u00a0\u00a0\$articles[] \u003d \$row;\n\u00a0}\n}\n\n// \u8f93\u51fa\u6570\u636e\u4e3aJSON\u683c\u5f0f\n\u65e0\u6cd5\u6267\u884cjson_encode\u51fd\u6570\uff0c\u56e0\u4e3a\u51fd\u6570\u7684\u63a5\u53e3\u662f\u5149\u901a\u6587\u672c\u63a5\u53e3\uff0c\u800c\u672c\u4f8b\u5b50\u662f\u5728\u5185\u90e8\u8fdb\u884c\u6570\u636e\u5e93\u67e5\u8be2\u7684\u3002\n\n// \u5173\u95ed\u6570\u636e\u5e93\u8fde\u63a5\n\$conn->close();\n?>\n\n\n\u4e0b\u4e00\u6b65\uff0c\u521b\u5efa\u4e00\u4e2aHTML\u9875\u9762\uff0c\u4f7f\u7528jQuery\u6765\u5904\u7406AJAX\u8bf7\u6c42\u5e76\u52a8\u6001\u52a0\u8f7d\u66f4\u591a\u5185\u5bb9\u3002\n\nhtml\n<!DOCTYPE html>\n<html>\n<head>\n\u00a0<title>\u52a0\u8f7d\u66f4\u591a\u5185\u5bb9</title>\n\u00a0<script src=\'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\'></script>\n\u00a0<script>\n\u00a0\u00a0$(document).ready(function(){\n\u00a0\u00a0\u00a0var offset \u003d 10; // \u6bcf\u6b21\u70b9\u51fb\u52a0\u8f7d\u66f4\u591a\u65f6\u7684\u504f\u79fb\u91cf\n\u00a0\u00a0\u00a0var limit \u003d 10; // \u6bcf\u6b21\u52a0\u8f7d\u7684\u6570\u636e\u91cf\n\n\u00a0\u00a0\u00a0// \u70b9\u51fb\u52a0\u8f7d\u66f4\u591a\u6309\u94ae\u65f6\u53d1\u9001AJAX\u8bf7\u6c42\n\u00a0\u00a0\u00a0$(\'#loadMore\').click(function(){\n\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0url: \'load_more.php\',\n\u00a0\u00a0\u00a0\u00a0\u00a0type: \'GET\',\n\u00a0\u00a0\u00a0\u00a0\u00a0data: {offset: offset, limit: limit},\n\u00a0\u00a0\u00a0\u00a0\u00a0dataType: \'json\',\n\u00a0\u00a0\u00a0\u00a0\u00a0success: function(data){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0// \u89e3\u6790\u8fd4\u56de\u7684JSON\u6570\u636e\u5e76\u52a0\u5165\u5230\u9875\u9762\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.each(data, function(index, article){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var title \u003d article.title;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var content \u003d article.content;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var articleHtml \u003d \'<div><h2>\' + title + \'</h2><p>\' + content + \'</p></div>\';\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\'#articles\').append(articleHtml);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0offset += limit; // \u66f4\u65b0\u504f\u79fb\u91cf\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0});\n\u00a0</script>\n</head>\n<body>\n\u00a0<div id=\'articles\'>\n\u00a0\u00a0\n\u00a0\u00a0<?php\n\u00a0\u00a0\u00a0// \u67e5\u8be2\u5e76\u8f93\u51fa\u521d\u59cb\u6570\u636e\n\u00a0\u00a0\u00a0\$sql \u003d \'SELECT title, content FROM articles LIMIT 10\';\n\u00a0\u00a0\u00a0\$result \u003d \$conn->query(\$sql);\n\n\u00a0\u00a0\u00a0\u5982\u679c (\$result->num_rows > 0) {\n\u00a0\u00a0\u00a0\u00a0while (\$row \u003d \$result->fetch_assoc()) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\$title \u003d \$row[\'title\'];\n\u00a0\u00a0\u00a0\u00a0\u00a0\$content \u003d \$row[\'content\'];\n\u00a0\u00a0\u00a0\u00a0\u00a0echo \'<div><h2>\$title</h2><p>\$content</p></div>\';\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0}\n\u00a0\u00a0?>\n\u00a0</div>\n\u00a0<button id=\'loadMore\'>\u52a0\u8f7d\u66f4\u591a</button>\n</body>\n</html>\n\n\n\u5728\u4e0a\u8ff0\u4ee3\u7801\u4e2d\uff0c\u6211\u4eec\u9996\u5148\u5728HTML\u9875\u9762\u4e2d\u8f93\u51fa\u4e86\u521d\u59cb\u768410\u6761\u6570\u636e\u3002\u7136\u540e\u5728\u70b9\u51fb\u201c\u52a0\u8f7d\u66f4\u591a\u201d\u6309\u94ae\u65f6\uff0c\u53d1\u9001\u4e86\u4e00\u4e2aGET\u8bf7\u6c42\u5230'load_more.php'\u6587\u4ef6\uff0c\u5e76\u4f20\u9001\u4e86\u73b0\u5728\u7684\u504f\u79fb\u91cf\u548c\u6bcf\u6b21\u52a0\u8f7d\u7684\u6570\u636e\u91cf\u3002'load_more.php'\u6587\u4ef6\u5728\u63a5\u53d7\u5230\u8bf7\u6c42\u540e\uff0c\u6839\u636e\u4f20\u9001\u7684\u504f\u79fb\u91cf\u548c\u6570\u636e\u91cf\u67e5\u8be2\u6570\u636e\u5e93\uff0c\u5e76\u5c06\u67e5\u8be2\u7ed3\u679c\u4ee5JSON\u683c\u5f0f\u8fd4\u56de\u7ed9\u524d\u7aef\u3002\u524d\u7aef\u4ee3\u7801\u901a\u8fc7\u89e3\u6790\u8fd4\u56de\u7684JSON\u6570\u636e\uff0c\u5e76\u5c06\u6bcf\u6761\u6570\u636e\u52a8\u6001\u52a0\u5165\u5230\u9875\u9762\u4e0a\u3002\n\n\u8bf7\u6ce8\u610f\uff0c\u4e0a\u8ff0\u4ee3\u7801\u53ea\u63d0\u4f9b\u4e86\u4e00\u4e2a\u793a\u4f8b\uff0c\u5b9e\u9645\u5e94\u7528\u4e2d\u53ef\u80fd\u9700\u8981\u6839\u636e\u5177\u4f53\u7684\u9700\u6c42\u8fdb\u884c\u4fee\u6539\u548c\u4f18\u5316\u3002