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

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

阅读别人的中文笔记

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('

You input is "%s"

' % input)
3.新建目录及文件
template/ajax/ajax.html内容如下：
    "">

Ajax 演示

输入：

其中用到的两个JS文件，一个是一个轻量级的JS库，从这个地址下载：

下载得到文件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',
)
然后访问，就可以体验到简单的ajax了。另外发现个问题，修改了media下的东东，要重启服务才能生效
以后写程序的时候要注意一点。   

step by step(十四)
1.要用json作为返回的数据格式，所以要用到simplejson这个东东，网址是：

文档在：

结果看到第一句，貌似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)，我只是想观察以下，这两个东东的类型，运行后，控制台打印的是：

3.修改template/ajax/ajax.html文件，增加了一个按钮，点击后返回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，访问如下地址：

就可以测试，看到效果了。另外如果直接访问这个url：

可以看到返回的json字符串：
{"body": [["\u5f20\u4e09", "1111"], ["\u674e\u56db", "2222"]], "head": ["Name", "Telphone"]}