Question

我正在试图弄清楚如何在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')

基本上，我希望能够做的是在文本框中输入文本，单击按钮，并将innerHTML“ajaxP”更改为输入的文本。

没有错误，按下按钮时它什么也没做。

任何帮助？

已解决：表单按钮必须是“提交”类型，而不是“按钮”。捂脸。

Answer 1

$("#ajaxP").load("/ajax", ...向GET发送POST（不是/ajax）请求，并使用回复HTML替换#ajaxP的内容。

您可以通过在Python代码中将method='POST'更改为method='GET'来解决您的问题。

或者您可以通过阻止表单提交并发送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();
    });
});

Answer 2

请将表单按钮的类型修改为type= "submit"，而不是"button"。

使用jQuery AJAX和Python的瓶子

已解决：表单按钮必须是“提交”类型，而不是“按钮”。捂脸。

2 个答案: