0

私はWSGIとjQueryにまったく慣れていないため、これら2つのデバイスを組み合わせて使用​​する簡単な例を探しています。私はすでにこのトピックで何かを見つけるために数時間を費やしましたが、深刻な成功はありませんでした：この質問は良い出発点です：PythonでAJAX用の最小限のサーバーを実装する方法は？ただし、現時点では、jQueryを使用するために変更する方法がわかりません。

ヒントをいただければ幸いです。前もって感謝します！

4

2 に答える 2

1

jQuery はクライアントのブラウザーで実行されるため、リンク先のコードを必ずしも変更する必要はありません。ただし、独自の python サーバーをロールする代わりに、これを使用することをお勧めします。

http://flask.pocoo.org/

他の誰かのコードを使用した最小バージョンよりもはるかに簡単に作業できます。Plus は AJAX タイプのコマンドを直接サポートしており、次のように文書化されています。

http://flask.pocoo.org/docs/patterns/jquery/

したがって、要するに、2 つのハンドラー (アクセス可能な URL) になります。

メインハンドラー Ajaxhandler

「フロントエンド」は Mainhandler に行くことによって提供されます。しかし、ユーザーがボタンをクリックすると、たとえば、jQuery は「Ajaxhandler」への呼び出しを作成し、新しいデータを取得して、その新しいデータで Web ページを直接更新します。そして、そのハンドラーは、たとえば、ページを置き換えるのではなく、ページを更新するために使用できる少量のデータを返すことを知っています。

以上です。

したがって、いくつかのjavascript（jQuery）があり、それが実際にajaxyビットを実行しました。

 /* Send the data using post and put the results in a div */
    $.post( url, { s: term },
            function( data ) {
                var content = $( data );
                $("#result").empty().append( content );
                $("#result").fadeIn();
                $("#s").attr('value', ''); /* reset search text box */

したがって、ここでユーザーがボタンをクリックすると、サーバーに対して投稿リクエストが行われ、結果が取得されて div が空になり、新しい値で更新され、Web ページがグローバルに変更されることなく更新されます。アヤックス！

于 2012-09-11T08:57:22.750 に答える
0

徹底的な調査の結果、次の例にたどり着きました。WSGIファイル：

import threading
import webbrowser
from wsgiref.simple_server import make_server
from cgi import parse_qs

FILE = 'frontend.html'
PORT = 8080

def test_app(environ, start_response):

    path = environ.get('PATH_INFO', '').lstrip('/')      #get path

    if ("static" in path):                               #handle query for
        status = '200 OK'                                #files in /static
        headers = [('Content-type', 'text/javascript')]
        start_response(status, headers)
        f2serv=file(path,'r')                            #read file 
    return environ['wsgi.file_wrapper'](f2serv)          #return file

    if environ['REQUEST_METHOD'] == 'POST':              #If POST...
        try:
            request_body_size = int(environ['CONTENT_LENGTH'])
            request_body = environ['wsgi.input'].read(request_body_size)
        except (TypeError, ValueError):
            request_body = "0"

        parsed_body = parse_qs(request_body)    
        value = parsed_body.get('test_text', [''])[0] #Returns the first value

        try:
            response_body = str(int(value) ** 2)
        except:
            response_body = 'error'

        status = '200 OK'
        headers = [('Content-type', 'text/plain')]
        start_response(status, headers)
        return [response_body]

    else:                                             #If not POST, just pass
        response_body = open(FILE).read()             #the html file itself
        status = '200 OK'
        headers = [('Content-type', 'text/html'),
                   ('Content-Length', str(len(response_body)))]
        start_response(status, headers)
        return [response_body]

def open_browser():
    # Start a browser after waiting for half a second
    def _open_browser():
        webbrowser.open('http://localhost:%s/%s' % (PORT, FILE))
    thread = threading.Timer(0.5, _open_browser)
    thread.start()

def start_server():   
    httpd = make_server("", PORT, test_app)
    httpd.serve_forever()

if __name__ == "__main__":
    open_browser()
    start_server()

htmlファイル（「frontend.html」という名前）：

<html>
    <head>
        <title>AJAX test</title>
    </head>
    <body>
        <script src="static/jquery-1.8.1.js"
            type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function submit(){
            $.post( "?", { test_text : $("#test_text").val() },
                function( data ) {
                $('#test_result').html(data);});
            };
        </script>
        square(
        <input type="text" name="test_text" id="test_text" value="0" size="4">
        ) =
        <span id="test_result">0</span>
        <input type="button" value="compute"
            title="compute" onclick="submit();"/>
    </body>
</html>

重要：上記の例を機能させるには、jquery.jsの実際のバージョンを/ static（この場合はstatic / jquery-1.8.1.js）の下にコピーする必要があります。

于 2012-09-11T11:41:36.747 に答える