(2012.11.23 再編集。個人的なミスによるものもあり、申し訳ありません。)
Google App Engine で Web システムを開発しています。リンクを含むページbase.htmlがあり、クリックすると Ajax 経由でcontent1 divが更新されます。content1は、ボタンとcontent2 divを含むadmin.htmlによって提供されます。ボタンをクリックすると、Ajax 経由でcontent2も更新されます。content2は manage.hmtl によって提供され、データを 1 つずつ収集するための多くのフォームがあります。
ここに私の問題があります：
(1) base.html のリンクとadmin.htmlのボタンの 2 回のクリックは、それぞれ正常に機能します。 content1はボタンを表示し、content2はフォームを表示します。しかし、 manage.html にはcontent2 div がありません。Ajax は admin.html でcontent2をどのように更新しますか? 現在、フォームデータの 1 つを投稿すると、content1が空白になります。入力する他のデータがあるため、フォームを引き続き表示したいと思います。
(2) ページ内に 20 以上のリンクとボタンがあります。それらのために 20 個の Ajax 関数を作成する必要がありますか? 代わりに 1 つ (または 2 つ) の関数を記述し、リンクとボタンで共有する方法はありますか。
よろしくお願いします。プログラムの説明とスクリプトの一部を次に示します。
main.pyは base.htmlをレンダリングします( content1 div を含む)
URL /admin: class Admin(webapp2.RequestHandler) は、admin.htmlのコンテンツ(ボタンとcontent2 div を含む) をAjax 経由でcontent1に追加します。
URL /admin?arg1=manage: class Manage(webapp2.RequestHandler) は、manage.htmlのコンテンツ(いくつかのフォームを含む) をAjax 経由でcontent2に追加します。
問題: content2 のいずれかのフォーム(つまり、manage.html ) を送信した後、ページが空白になりました。
base.html:
<html>
...
<div id="content1"></div>
...
<a href="javascript:void(0);" onclick="return admin()">Admin</a>
...
<script>
function admin() {
$.ajax({
type: "get",
url: "/admin",
cache: false,
success: function(returndata){
$("#content1").html(returndata);
}
});
}
</script>
...
</html>
'admin.html' (HTML ヘッダーなし)
...
<a href="javascript:void(0);" onclick="return manage()">
<img src="/static/images/main-manage.png" class="adminButton" /></a>
...
<div id="content2"></div>
...
<script>
function manage() {
$.ajax({
type: "get",
url: "/admin?arg1=manage",
cache: false,
success: function(returndata){
$("#content2").html(returndata);
}
});
}
</script>
'manage.html' (HTML ヘッダーなし)
<form action="" method="">
...
<input type="file" name="image">
<input type="button" onclick="return addImage()">
</form>
...
<form ...>
...
</form>
<script>
function addImage() {
var image = $('input[name=image]').val();
$.ajax({
type: "post",
url: "/admin?arg1=manage&arg2=image",
data: {'image': image},
cache: false,
success: function(returndata){
$("#content2").html(returndata);
}
});
}
</script>