2

Python の Bottle モジュールで jQuery AJAX を使用する方法を理解しようとしています。

2 つのボタンを含む非常に基本的なページを作成しました。1 つは jQuery によって制御され、もう 1 つはフォーム内で送信ボタンとして制御されます。両方のボタンは、ボトル サーバーに POST 要求を送信するだけで、"Done!" で応答する必要があります。メッセージ。

これはテンプレートのコードです:

<!DOCTYPE html>
<html>
    <head>
        <title>Test Template</title>
        <!-- JQuery JS -->
        <script src="http://code.jquery.com/jquery.js"></script>

        <script>
            $(document).ready(function() {
                $('button').on('click', function(){
                    $.post("/home");
                });
            });
        </script>

    </head>
    <body>
        <button>Submit</button>
        <form action="/home" method="post" enctype="multipart/form-data">
            <input type="submit" value="Submit" />
        </form>
    </body>
</html>

そして、これはボトルサーバーのコードです:

from bottle import route, run, template

@route('/home')
def home():
    return template('template')

@route('/home', method='POST')
def homePost():
    return  "Done!"

run(host='localhost', port=8080, debug=True)
run(reloader=True)

フォーム ボタンをクリックするとメッセージが正しく返されるのに、jQuery ボタンをクリックしても何も起こらないのはなぜですか? jQueryはボトルの応答を何らかの形でブロックしていますか?

ご協力いただきありがとうございます。

パブロ

4

1 に答える 1

3

...jquery ボタンが ajax リクエストをサーバーに送信するためです。ajax リクエストは舞台裏で発生し、ページには何もしません。一方、フォームの送信ボタンをクリックすると、サーバーが送り返した内容を含む新しいページが読み込まれます。

サーバーがデータを返すときに呼び出される jquery ajax リクエストで関数を指定する必要があります。関数内では、データを使って何かを行うことができます。通常、既存のタグに挿入します。

$.post("/home", function(dataFromServer) {
  $('#mydiv').html(dataFromServer);
}

ajax リクエストの優れた点は、サーバーからデータを取得してページに挿入できることです。ページをリロードする必要はありません。

于 2013-07-01T06:52:40.230 に答える