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

时间:2018-07-25 18:25:56

标签: python jquery html ajax forms

我想用html文件将用户在html文件中输入的数据发布到AJAX的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的超薄版本。解决此问题后,当我输入并单击提交时,页面上没有任何反应。

1 个答案:

答案 0 :(得分:0)

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

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

访问值