使用Python的Django框架结合jQuery实现AJAX购物车页面 - 哈喽比特

1090次阅读 | 发布于5年以前

Django中集成jquery
首先，静态的资源通常放入static文件夹中：


    static/
      css/
        djquery.css
        samples/
          hello.css
      js/
        jquery-1.7.1.min.js
        samples/
          hello.js

其中css和js都按照应用名称（这里是samples）划分文件夹，如果文件较多，还可以再划分子文件夹。

Django通常使用模板来展现html，而且我们通常使用继承的模板，所以需要将共用的元素，比如全局的css，对jquery.js的引入等，写到base模板中，而将具体页面的元素放到具体的模板中。这就牵涉到如何嵌套的问题。看下面的例子：
base.html


    <html>
     <head>
      <meta charset="utf-8">
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>{% block title %} 标题 {% endblock %}</title>
      <link href="css/djquery.css" rel="stylesheet">
    {% block styles %}<!--custom styles-->{% endblock %}
     </head>
     <body>
      <div id="container">
    {% block content %}内容{% endblock %}
      </div>
    </body>
    <script language="JavaScript" type="text/javascript" src="/static/js/jquery-1.7.1.min.js"></script>
    {% block scripts %}
    <!--custom scripts-->
    {% endblock %}
    </html>

samples/hello.html


    {% extends "base.html" %}

    {% block title %}
    hello, djquery! 
    {% endblock %}

    {% block styles %}
    {% endblock %}

    {% block content %}
    <div><input type="button" id="myField" value="Click me!"/></div>
    {% endblock %}

    {% block scripts %}
    <script language="JavaScript" type="text/javascript" src="/static/js/djquery/hello.js"></script>
    {% endblock %}

Hello， Djquery！
有了上述的"框架"，我们就可以很容易的验证一下我们的想法，比如这个"Hello Djquery"。只需要在urls.py中配置一下：

复制代码 代码如下:

(r'hello/$', 'django.views.generic.simple.direct_to_template', {'template':'samples/hello.html'}),