使用Python的Django框架结合jQuery实现AJAX购物车页面
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> <metacharset="utf-8"> <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> <title>{%blocktitle%}标题{%endblock%}</title> <linkhref="css/djquery.css"rel="stylesheet"> {%blockstyles%}<!--customstyles-->{%endblock%} </head> <body> <divid="container"> {%blockcontent%}内容{%endblock%} </div> </body> <scriptlanguage="JavaScript"type="text/javascript"src="/static/js/jquery-1.7.1.min.js"></script> {%blockscripts%} <!--customscripts--> {%endblock%} </html>
samples/hello.html
{%extends"base.html"%} {%blocktitle%} hello,djquery! {%endblock%} {%blockstyles%} {%endblock%} {%blockcontent%} <div><inputtype="button"id="myField"value="Clickme!"/></div> {%endblock%} {%blockscripts%} <scriptlanguage="JavaScript"type="text/javascript"src="/static/js/djquery/hello.js"></script> {%endblock%}
Hello,Djquery!
有了上述的“框架”,我们就可以很容易的验证一下我们的想法,比如这个“HelloDjquery”。只需要在urls.py中配置一下:
(r'hello/$','django.views.generic.simple.direct_to_template',{'template':'samples/hello.html'}),