html前端页面.通过AJAX异步获取内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用JSON得到的页面</title> <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <body> <div class="container"> <div class="row" id="wp"> </div> </div> <script> function sp(){ $.ajax({ type: "GET", url: "file_ku.json", dataType: "json", success: function(html){ for(var i=0;i<html["$heroArr"].length;i++){ $("#wp").append("<div class=\"col-sm-6 col-md-4\">\n" + " <div class=