使用jquery load()方法

对于前端只使用静态页面和js的简易方法搭建时，在菜单栏固定的情况下，可以考虑使用load方法切换静态页面。

作用：从服务器加载数据，并把返回的数据放置到指定的元素中。

语法：$(selector).load(url,data,function(response,status,xhr))

url是指要导入文件的地址。
data：可选参数；因为load不仅仅可以导入静态的html文件，还可以导入动态脚本，可以把要传递的参数放在这里。
function：可选参数；是指调用load方法并得到服务器响应后，再执行的另外一个函数。

示例：

因为项目较小，业务简单，开发时间很短，我这个非专业前端使用静态页面和js做了一套网站前端。

网站固定了菜单栏和页脚，根据所选的菜单在中间的div中加载具体的内容。

这样处理的优点：切换菜单（即div中加载页面）时，浏览器路径栏不会改变。

两种用法：

1. 无参数：

$("#contentDiv").load('/modular/login/login.html');

2. 带参数：使用了一个比较笨的办法，在目标页面增加一个隐藏的属性，页面加载成功后利用function参数给该属性赋值。

$("#contentDiv").load('/modular/login/login.html', function() {
    $('#lastPage').val("/modular/personal/personal.html");  // 给login.html的lastPage赋值
});

 

另外，可以使用tomcat或者nginx作为容器启动静态页面。

我使用了nginx启动，配置如下：

server {
        listen       80;
        server_name  www.ha.com;
        access_log   logs/portal.access.log;

        location / {
            root   my_web/rest;    // 给静态页面存放相对路径
            index  index.html;  // 首页
        }
        error_page  404              /404.html;
        error_page  500 502 503 504  /404.html;
        location = /50x.html {
            root   html;
        }
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
    }