带有烧瓶/python的jquery导航栏答案

【问题标题】：jquery navigation bar with flask/python带有烧瓶/python的jquery导航栏
【发布时间】：2014-03-27 20:43:00
【问题描述】：

我使用 Dreamweaver 构建了一个简单的网页，其中包括一个使用 jquery 的简单导航栏。它使用 Flask 在我的 RPi 上运行，但导航不再起作用。

HTML 代码：

<table width="100%" height ="100%" border="0">
   <tr>
     <td width="120px" valign="top">
       <ul  id="Navigation" class="nav">
        <li id="home" ><a data-site="home" href=""><br><img src="{{ url_for('static',filename='icons/Home.png')}}" width="40" height="40"><br> Home</a></li>
        <li id="light"><a data-site="light" href=""></a></li>
        <li id="htpc"><a data-site="htpc" href=""></a></li>

      </ul>

     </td>

     <td class="content" valign="top" ></td>
   </tr>
 </table>

jquery:

 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){ 

            $(".content").load("{{ url_for('static', filename='home.html')}}");
            $('.nav a').click(function(e){              
                e.preventDefault();                
                var site = $(this).data('site'); 

                site = site + '.html';                

                $(".content").load(site); 
            });
        });
</script>

我用运行良好的url_for 函数替换了一些链接（用于图像）。我得到了home.html 工作，但其余的不起作用。当我单击 li 元素“light”时，我得到了404 错误“light.html not found”。我确定路径是错误的，但我怎样才能以简单的方式解决这个问题？

【问题讨论】：

标签： javascript jquery python html flask

【解决方案1】：

搞定了！

*.py 文件中需要@app.route。

(...)
@app.route("/light", methods=['GET'])
def light():
    return render_template('light.html')
(...)

light.html 必须位于 /templates 文件夹中。它可以与"/light" 一起使用。我也是为home.html 做的。也许不是最好的方法，但它确实有效！

像这样：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){ 

            $(".content").load("/home");
            $('.nav a').click(function(e){              
                e.preventDefault();                
                var site = $(this).data('site'); 

                 site  = '/' + site;                

                $(".content").load(site); 
            });
        });
</script>

【讨论】：