使用ajax将输入数据从html发布到python脚本答案

【问题标题】：posting input data from html to python script with ajax使用ajax将输入数据从html发布到python脚本
【发布时间】：2018-07-25 18:25:55
【问题描述】：

我想通过 AJAX 将用户在 html 文件中输入的数据发布到 Python 脚本，并让 Python 脚本返回它，以便它显示在 html 文件的特定 div 中。

HTML

<!DOCTYPE HTML>
<html>
  <head>
    <title>AJAX Test</title>
    <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
        function test()
        {
            var message = $('input[name=message]').val();
            $.ajax({
                url: "/cgi-bin/hello.py",
                type: "POST",
                data: {"text" : message},
                success: function(response){
                        $("#div").html(response);
                }
            });
        };

    </script>
  </head>
  <body>
    <form>
    Enter Message: <input type="text" name="message">
    <input type="submit" value="submit" onclick="test()">
    </form>
    <div id="div">Default Message</div>

  </body>
</html>

Python

#!/home/user/virtualenv/test/3.5/bin/python

import cgi, cgitb 
cgitb.enable() 

data = cgi.FieldStorage()

print "Content-Type: text/html\n"
print data

当我在输入框中输入消息并按下提交按钮时，没有任何反应。我是新手，所以我觉得我可能不明白这是如何工作的。任何帮助将不胜感激！

编辑：控制台显示Uncaught TypeError: $.ajax is not a function

编辑 2：第一个问题是由于使用了 jquery 的精简版本。修复后，当我输入并单击提交时，页面上什么也没有发生。

【问题讨论】：

查看开发者控制台是否有某些 javascript 错误，并确保您的 python 端点设置正确。不确定您使用的是什么 http 服务器。
我正在尝试在虚拟主机上设置页面，我相信 python 设置正确。在控制台中，我收到错误：Uncaught TypeError: $.ajax is not a function
您似乎没有在标头中包含 JQuery 库。还可以看看这个：stackoverflow.com/questions/18271251/…在提问之前你绝对应该在谷歌上搜索一下。
谢谢，我在标题中有 jquery 脚本源，但它似乎不起作用。我会试着弄清楚。关于谷歌搜索，如果我知道你告诉我的开发者控制台，我会用谷歌搜索的。没有控制台，我不知道发生了什么。所以，谢谢你两次。
修复jquery问题后，输入并按提交时没有任何反应

标签： python jquery html ajax forms

【解决方案1】：

问题是当我单击按钮时表单正在提交。解决方案是将输入类型更改为<button value="Submit" onclick="test()">。

下一个问题是 python 返回了FieldStorage(None, None, [MiniFieldStorage('text', 'blahblah')])。解决方案是使用print (data["text"].value)访问该值

【讨论】：