在Python的瓶子中使用异步POST请求?

2024-09-28 20:51:13 发布

您现在位置:Python中文网/ 问答频道 /正文

我正在尝试用Python创建一个基于回合的策略游戏(想想Dominion)。游戏的核心对象和方法是Python类和方法(只是典型的OO东西)。用户界面是一个使用瓶子的HTML客户端。我的目标是一个完全异步的方法。因此,唯一页面的内容是从Python对象生成的,我希望从页面提交来更新这些对象,而不必返回瓶子web服务器(为此使用jqueryajax)。在

目前,我正在开发一个基本的聊天系统,它可以检索玩家写的消息并将其存储为聊天对象(只包含播放器和文本数据,不包含其他内容)。然后使用AJAX将这些对象写入聊天窗口,该AJAX每秒更新一次窗口。聊天行的HTML格式是<div class="chatLine"><p>Player > </p><p>Text</p></div>非常标准的东西。在

这个基本的图表可能会让它更清晰一些,尽管它不是真正的技术性的,更具概念性的:


Communication cycle diagram


我的瓶装水.py(这是我运行以启动服务器的命令):

from Populate import *  # Everything in Populate can now be directly called.
# NOTE: Populate allows access to "bottle" and "Main"

# This ensures the css file is available
@route('/theCSS')
def static():
    return static_file('main.css', root='static')

@route('/citadel/:game/:player')
def gamePage(game, player):
    if not (game.isdigit()) or not (player.isdigit()):
        return "Invalid page."
    game = int(game)
    player = int(player)
    if ((game >= 0) and (game < listOfGames.__len__())) and ((player >= 0) and (player < listOfGames[game].listOfPlayers.__len__())):

        return '''

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="/theCSS">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!-- Sample AJAX script below, change as needed -->
    <script type="text/javascript">
        $(document).ready(function() {
            $('#chatForm').submit(function(e) {
                $.ajax({
                    type: 'POST',
                    url: "/AddToChat/''' + str(game) + '''/''' + str(player) + '''",
                    success: function() {
                        $('#chatInput').val("");
                    }
                });
                e.preventDefault();
            });
        });
        setInterval("updateChat();", 1000);
        $(function() {
            updateChat = function() {
                $('#chatText').load('/GenerateChat/''' + str(game) + '''');
            };
        });
    </script>
    <!-- Script to scroll to bottom of divs - needs to be changed into called function -->
    <script type="text/javascript">
        window.onload = function () {
             var objDiv = document.getElementById("gameFlow");
             objDiv.scrollTop = objDiv.scrollHeight;
             objDiv = document.getElementById("chatText");
             objDiv.scrollTop = objDiv.scrollHeight;
        };
    </script>
</head>
<body>
    <div id="container">
        <!-- Make this have background-image with the game number displaying programmatically -->
        <div id="banner">
            <h1>Citadel - Game ''' + str(game) + ''', Player ''' + str(player) + '''</h1>
        </div>
        <div id="main">
            <div id="leftPanel">
                <div id="playerTotals">
                    <h4>Player Totals:</h4>
                    <div id="totalsText">
                        <p>Money:</p>
                        <p>Population:</p>
                        <p>Troops:</p>
                        <p>Friend:</p>
                        <p>Enemy:</p>
                    </div>
                    <!-- Player totals go here (money, population/limit, troops, friend, enemy) -->
                    <div id="totalsNums">

                    </div>
                    <div class="clear"></div>
                </div>
                <div class="leftSegment">
                    <h4>Troop Cards:</h4>
                    <!-- Player's troopCards here -->
                    <select size=2>

                    </select>
                </div>
                <div class="leftSegment">
                    <h4>Territory Cards:</h4>
                    <!-- Player's territoryCards here -->
                    <select size=2>

                    </select>
                </div>
                <div class="leftSegment">
                    <h4>Region Cards:</h4>
                    <!-- Player's regionCards here -->
                    <select size=2>

                    </select>
                </div>
                <div class="leftSegment">
                    <h4>Resource Cards:</h4>
                    <!-- Player's resourceCards here -->
                    <select size=2>

                    </select>
                </div>
                <div class="leftSegment">
                    <h4>Diplomacy Cards:</h4>
                    <!-- Player's diplomacyCards here -->
                    <select size=2>

                    </select>
                </div>
                <div id="chatPane">
                    <form id="chatForm" method="POST" action="/AddToChat/''' + str(game) + '''/''' + str(player) + '''">
                        <textarea name="theChatText" id="chatInput"></textarea>
                        <input id="chatSubmit" class="button" type="submit" value="Send" />
                    </form>
                </div>
                <div class="clear"></div>
            </div>
            <div id="rightPanel">
                <!-- Game flow goes here (shows current player/phase, attacks with results, etc) -->
                <div id="gameFlow">

                </div>
                <!-- Player turn stuff goes here (changes depending on which phase, etc) -->
                <div id="playerActions">

                </div>
                <!-- Chat goes here (implement last) -->
                <div id="chatText">

                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</body>
</html>

    '''

    else:
        return "Invalid page."

run(host='localhost', port=8080)

这是我的填充.py(这是存储AJAX@route方法的地方):

^{pr2}$

问题是,“chatForm”表单无法按预期工作。AddToChat()似乎认为当我试图提交文本时{}是{}。在

所以是的,我不明白为什么要这么做。据我所知,'theChatText'应该是POST dict中的有效密钥

我还要说明我所有的核心游戏逻辑都是有效的(尽管很明显这不是问题所在)。在

感谢任何帮助。在


Tags: 对象dividgameheretypescriptfunction
1条回答
网友
1楼 · 发布于 2024-09-28 20:51:13

原始jQuery函数:

$(document).ready(function() {
    $('#chatForm').submit(function(e) {
        $.ajax({
            type: 'POST',
            url: "/AddToChat/''' + str(game) + '''/''' + str(player) + '''",
            success: function() {
                $('#chatInput').val("");
            }
        });
        e.preventDefault();
    });
});

需要添加data: $(this).serialize(),,如下所示:

^{pr2}$

否则服务器(本例中为瓶子)将无法读取提交的表单。在

相关问题 更多 >