django入门(七)简单的ajax和json

django入门(七)简单的ajax和json

阅读别人的中文笔记
http://www.woodpecker.org.cn/obp/django/django-stepbystep/newtest/doc/

step by step(十三)
1.创建ajax应用
对了,我的环境从windows切换到了ubuntu9.10上了,所以对应的操作可能都和以前又些许的不同。
python manage.py startapp ajax
2.修改ajax/views.py加上对ajax处理的代码如下:
from django.http import HttpResponse
def input(request):
    input = request.REQUEST["input"]
    return HttpResponse('<p>You input is "%s"</p>' % input)
3.新建目录及文件
template/ajax/ajax.html内容如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Ajax Test</title>
<script type="text/javascript" src="/site_media/MochiKit.js"></script>
<script type="text/javascript" src="/site_media/ajax_test.js"></script>
</head>
<body>
<h1>Ajax 演示</h1>
<div>
<form id="form">
输入:
<input type="text" name="input" />
<input id="submit" type="button" value="提交" />
</form>
</div>
<div id="output"></div>
</body>
</html>
其中用到的两个JS文件,一个是一个轻量级的JS库,从这个地址下载:
http://mochikit.com/download.html
下载得到文件MockiKit-1.4.2.zip,拷贝里面的文件/MockiKit-1.4.2/packed/MochiKit/MochiKit.js到我们的media目录下
这个JS库还挺不错的,不过不晓得和平时用的jquery比如何。先照着实例使用以下。
4.新建JS文件/media/ajax_test.js,内容如下:
function submit() {
var form = $("form");
var d = doSimpleXMLHttpRequest('/ajax/input/', form);
d.addCallbacks(onSuccess, onFail);
}
onSuccess = function(data) {
var output = $("output");
output.innerHTML = data.responseText;
showElement(output);
}
onFail = function(data) {
alert(data);
}

function init() {
var btn = $("submit");
btn.onclick = submit;
var output = $("output");
hideElement(output);
}

addLoadEvent(init);
确实很简单明了。
5.修改ajax的映射,在urls.py里面增加:
(r'^ajax/$', 'django.views.generic.simple.direct_to_template',{'template': 'ajax/ajax.html'}),
(r'^ajax/input/$', 'easydjango.ajax.views.input'),
6.修改settings.py,添加我们新增的app
NSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.admin',
    'easydjango.wiki',
    'easydjango.address',
    'easydjango.ajax',
)
然后访问http://localhost:8000/ajax,就可以体验到简单的ajax了。另外发现个问题,修改了media下的东东,要重启服务才能生效
以后写程序的时候要注意一点。   

step by step(十四)
1.要用json作为返回的数据格式,所以要用到simplejson这个东东,网址是:
http://undefined.org/python/#simplejson
文档在:
http://simplejson.googlecode.com/svn/tags/simplejson-2.0.9/docs/index.html
结果看到第一句,貌似python2.6中,已经有了,所以我没有去下载或者安装什么的。

2.修改/ajax/views.py,增加返回json数据的方法
#coding=utf-8
def json(request):
    a = {'head':('Name', 'Telphone'), 'body':[(u'张三', '1111'), (u'李四', '2222')]}
    import simplejson
    out = simplejson.dumps(a)
    print type(a)
    print type(out)
    return HttpResponse(out)
其中的type(a)和type(out),我只是想观察以下,这两个东东的类型,运行后,控制台打印的是:
<type 'dict'>
<type 'str'>

3.修改template/ajax/ajax.html文件,增加了一个按钮,点击后返回json数据
<input id="json" type="button" value="JSON演示" />

4.修改/media/ajax_test.js文件,向刚才增加的按钮上绑定onclick的方法如下:
function callJson(){
    var d = loadJSONDoc('/ajax/json/');
    d.addCallbacks(onSuccessJson, onFail);
}
row_display = function (row) {
    return TR(null, map(partial(TD, null), row));
}
onSuccessJson = function (data){
    var output = $("output");
    table = TABLE({border:"1"}, THEAD(null, row_display(data.head)),
        TBODY(null, map(row_display, data.body)));
    replaceChildNodes(output, table);
    showElement(output);
}

function init() {
    var btn = $("submit");
    btn.onclick = submit;
    var output = $("output");
    hideElement(output);
    var btn = $("json");
    btn.onclick = callJson;
}

5.修改urls.py文件,增加了json的映射
(r'^ajax/json/$', 'easydjango.ajax.views.json'),

启动server,访问如下地址:
http://localhost:8000/ajax
就可以测试,看到效果了。另外如果直接访问这个url:
http://localhost:8000/ajax/json/
可以看到返回的json字符串:
{"body": [["\u5f20\u4e09", "1111"], ["\u674e\u56db", "2222"]], "head": ["Name", "Telphone"]}

你可能感兴趣的:(jquery,Ajax,json,django,python)