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"]}
阅读别人的中文笔记
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"]}