0

（重新编辑，2012年11月23日，因为有些问题是我个人错误造成的。对不起。）

我正在 Google App Engine 上开发一个网络系统。我有一个包含链接的页面base.html，每个链接在单击时都会通过 Ajax 更新content1 div。content1由包含按钮和content2 div的admin.html提供。单击按钮时，也会通过 Ajax更新content2 。content2由manage.hmtl提供，其中有多种形式可以一一收集数据。

这是我的问题：

(1) 两次单击base.html中的链接，然后单击admin.html中的按钮，都可以正常工作—— content1显示按钮，content2显示表单。但是，在manage.html中没有content2 div，Ajax 将如何更新admin.html中的content2呢？目前，当我发布其中一个表单数据时，content1 变为空白。我希望它仍然显示表单，因为还有其他数据要输入。

(2) 页面中有20多个链接和按钮。我必须为他们编写 20 个 Ajax 函数吗？有没有办法只编写一个（或两个）函数并通过链接和按钮共享。

提前感谢您的帮助。程序说明及脚本片段如下：

main.py呈现base.html（包括content1 div）

URL /admin: class Admin(webapp2.RequestHandler)通过 Ajax将admin.html的内容（包括按钮和content2 div）添加到content1

URL /admin?arg1=manage: class Manage(webapp2.RequestHandler)通过ajax将manage.html的内容（包括几个表单）添加到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>
4

0 回答 0