В данной заметке приведен пример изменения данных без перезагрузки страницы, будем изменять вики страницу.
Для разметки вики страницы загрузите pymark, загрузим его текущую папку
hg clone http://bitbucket.org/lega911/pymark
wget http://github.com/defnull/bottle/raw/master/bottle.py
#!/usr/bin/python
# coding: utf8
from bottle import run, debug, route, request
from pymark import mark1
import os
@route('/:fname')
def getfile(fname):
if os.path.isfile(fname): return open(fname,'rb')
if fname == 'msg': return 'new message'
abort(404)
@route('/mark/:fname')
def getfile(fname):
return mark1(open(fname,'rb').read())
@route('/')
def main():
buf = open('page.html','rb').read()
if os.path.isfile('msg'): msg = mark1(open('msg','rb').read())
else: msg = 'new message'
return buf.replace('{{msg}}', msg )
@route('/send', method='POST')
def send():
if 'msg' in request.POST:
data = request.POST['msg']
open('msg','wb').write(data)
return mark1(data)
return 'error post'
debug(True)
run(port=8080,reloader=True)
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#but_save").hide();
$("#but_cancel").hide();
$("#but_edit").bind("click", function(e){
$("#but_edit").hide();
data = $("#msg").text();
$("#msg").html( '<textarea style="width: 300px; height: 200px;" id="emsg">loading...</textarea>' );
$.get("/msg", function(data) {
$("#emsg").text(data);
$("#but_save").show();
$("#but_cancel").show();
});
});
$("#but_save").bind("click", function(e){
$("#but_save").hide();
$("#but_cancel").hide();
data = $("#emsg").val();
$.post("/send", { msg: data },
function(data){
$("#msg").html(data);
$("#but_edit").show();
});
});
$("#but_cancel").bind("click", function(e){
$("#but_save").hide();
$("#but_cancel").hide();
$.get("/mark/msg", function(data) {
$("#msg").html(data);
$("#but_edit").show();
});
});
});
</script>
<style>
.mess { border: 4px double black; margin: 5px; padding: 5px; width: 300px; height: 200px; }
.menu { border: 1px solid blue; cursor: pointer; padding: 3px; }
</style>
</head>
<body>
<br />
<div id="msg" class="mess">{{msg}}</div>
<br />
<span class="menu" id="but_edit">edit</span>
<span class="menu" id="but_save">save</span>
<span class="menu" id="but_cancel">cancel</span>
</body>
</html>