BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] PythonのBottleでjQuery AJAXを使う

2022-02-18 10:56:36

質問

PythonのBottleモジュールでjQuery AJAXを使用する方法を考えています。

これは私の最初の試みですが、うまくいかず、本当に壁にぶつかっています（一日中プログラミングをしていて、脳が少し焼けています）。 

    from bottle import route, request, run, get

@route('/form')
def construct_form():
    return '''

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('form').submit(function(e) {
                $.ajax({
                    type: 'POST',
                    url: '/ajax',
                    data: $(this).serialize(),
                    success: function(response) {
                        $('#ajaxP').html(response);
                    }
                });
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
    <form method="POST" action="/ajax">
        <input id="ajaxTextbox" name="text" type"text" />
        <input id="ajaxButton" type="button" value="Submit" />
    </form>
    <p id="ajaxP">Nothing to see here.</p>
</body>
</html>

    '''

@route('/ajax', method='POST')
def ajaxtest():
    theText = request.forms.text
    if theText:
        return theText
    return "You didn't type anything."

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

基本的には、テキストボックスにテキストを入力してボタンをクリックし、"ajaxP" の innerHTML を入力されたテキストに変更できるようにしたいのです。

エラーはなく、ただボタンを押しても何もしないのですが。

何かお手伝いできることはありますか？

解決済み : フォームボタンは "button" ではなく、 "submit" のタイプである必要があります。顔面蒼白。

解決するには？

$("#ajaxP").load("/ajax", ... が送信します。 GET (ただし POST へのリクエスト /ajax の内容を置き換えます。 #ajaxP をレスポンスHTMLに置き換えます。

を変更することで、問題を解決することができます。 method='POST' を method='GET' をPythonのコードに追加してください。

または、フォームの送信を防ぎ、代わりにAJAXリクエストを送信することで、JSを修正することができます。 

$(document).ready(function() {
    $('form').submit(function(e) {
        $.ajax({
            type: 'POST',
            url: '/ajax',
            data: $(this).serialize(),
            success: function(response) {
                $('#ajaxP').html(response);
            }
        });

        e.preventDefault();
    });
});​

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します