使用 Bottle (Python) 的 AJAX 提交表单答案

【问题标题】：AJAX Submission Form using Bottle (Python)使用 Bottle (Python) 的 AJAX 提交表单
【发布时间】：2012-02-07 05:52:43
【问题描述】：

我在使用 Bottle 框架进行 AJAX 通信时遇到了一些问题。这是我第一次使用 AJAX，所以很可能是我的基础知识错了。希望 Bottle/AJAX 大师可以为这个新手指出正确的方向。这是我正在使用的代码：

#!/usr/bin/env python

from bottle import route, request, run, get


# Form constructor route

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

<html>
<head>
<script type="text/javascript">

    function loadXMLDoc()
    {
        xmlhttp = new XMLHTTPRequest();
        xmlhttp.onReadyStateChange = function()
        {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                document.getElementById("responseDiv").innerHTML = xmlhttp.responseText;
            }
        }

    xmlhttp.open("GET", "/ajax", true);
    xmlhttp.send();
    }   

</script>
</head>

<body>

    <form>
        <input name="username" type="text"/>
        <input type="button" value="Submit" onclick="loadXMLDoc()"/>
    </form>
    <div id="responseDiv">Change this text to what you type in the box above.</div>

</body>
</html> 

    '''

# Server response generator

@route('/ajax', method='GET')
def ajaxtest():
    inputname = request.forms.username
    if inputname:
        return 'You typed %s.' % (inputname)
    return "You didn't type anything."

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

【问题讨论】：

我在 Chrome 中进行测试，因此不需要使用 IE 特定的代码 - 以防万一有人想到这一点。

标签： python ajax bottle

【解决方案1】：

这里有几个问题。

Javascript 区分大小写。 XMLHTTPRequest 应该是 XMLHttpRequest。您应该已经在 Javascript 控制台中看到了关于此的错误。
onReadyStateChange 应该是 onreadystatechange。
如果您解决了上述两个问题，您的 AJAX 调用将正常工作，但您只会得到“您没有输入任何内容”。回复。这是因为您使用的是 GET。您需要更改代码，以便使用 POST 方法发布表单值。

另外，你为什么不使用 jQuery 来做 AJAX？它会让你的生活更轻松。 :)

【讨论】：

谢谢，我知道这会很简单。至于不使用 jQuery——在我的编码生涯的这个阶段，我对“魔法”感到恼火，我真的需要先看看事情是如何运作的，然后才能继续前进。因此我也使用了 Bottle（这里仍然有很多魔法，但很少）。
这是不使用 jQuery（和 Django）的一个很好的理由。祝你的瓶子项目好运。这是一个有趣的框架。