Question

所以我有一个像这样的html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Find the words</title>
    <h1>Find the Words</h1>
</head>
<body>
<p>Find the largest and the smallest word</p>
<textarea rows="25" cols="100"></textarea>
<br>
<button type="button">Find now!</button>
<br><br>
<label>Largest Word</label>
<input type='largest word'/>

<label>Smallest Word</label>
<input type='smallest word'/>

</body>
</html>

我想运行一个python脚本，它将从文本中找到最大和最小的单词并将结果发回。脚本（words.py）是这样的：

#!/usr/bin/env python3

def find_small_large_words(given_string):
    new_list = given_string.split(" ")
    sorted_list = sorted(new_list, key=len)
    return 'Smallest: {0} & Largest: {1}'.format(sorted_list[0], sorted_list[-1])


words = "Ten years on from the financial crisis, it’s hard not to have a sense of déjà vu.Financial scandal and wrangles over financial rule-making still dominate " \
         "the headlines.The cyberhacking at Equifax compromisedpersonal records for half of the adult population of the United States.At SoFi, a one-time fintech darling"

print(find_small_large_words(words))

最终，我想点击“查找单词”按钮运行python脚本，然后将它们放回两个框中。我怎么能在这里做到这一点？我已经阅读了一些关于使用django框架的建议。还有其他简单的方法吗？如果是这样，怎么样？

编辑：我在烧瓶中尝试这个。到目前为止我的代码：

#!/usr/bin/env python3

from flask import *
from flask import render_template

app = Flask(__name__)

@app.route('/', methods = ['GET', 'POST'])
def homepage():

    import words
    return render_template("index.html")

if __name__ == "__main__":
    app.run()

但是，我不确定如何在textarea输入上专门执行python脚本并将输出发回。

Answer 1

首先，您需要一个表单来发送内容

＆＃13;

$( document ).ready(function() {
    ///
});

$("#submit").onclick(function"() {
  $.post( "url_for('main.calculate')", function( data ) {
     $("#smallest_word").val(data.smallest);
     $("#longest_word").val(data.longest);
  });

});

＆＃13;

<form action="" method="">
  <textarea name="txt_words"></textarea>
  <input id="submit" type="submit" name="submit" value="submit">
</form>

<input type="text" id="smallest_word" />
<input type="text" id="longest_word" />

＆＃13;

你有两种方法可以做到，它们是相同的，但它们仍然存在差异。

1-你可以使用jquery。为此，您应该编写一个jquery post方法，以便发布包含文本框的表单。 post

然后，您应该获取内容并再次使用jquery填充您的输入值。 get

然后，你需要烧瓶应用程序中的视图：

@mod.route('calculate', methods=['GET', 'POST'])
def calculate():
   if request.method == 'POST':
      text = request.form.get('text_words', 'None')
      if text:
         # do calculate!
         data = {"smallest": calculated_smallest, "longest": calculated_longest}
         return jsonify(data)
   else:
       # it's a GET render the template
       return render_template('form.html')

2-您可以发送表单，然后使用render_template返回最大和最小的变量，这样您就可以获得这些变量，并且可以在jinija2模板中处理如果最小和最大可用，则在输入框中显示它们的内容。 send variable to template

这是烧瓶代码，我已经在fl上写了

Answer 2

从你的目标判断，我建议你写一个javascript / jquery脚本，而不是python，这需要服务器处理（不必要，因为你只想将它发回html而不保存在数据库中或做任何I / O）。

如果你真的想在python中运行它，你可能需要像你提到的像flask或django这样的框架。如果这样做，请尝试在执行python脚本之前将用户输入保存到字符串变量中。例如：

#nav {
    	float: left;
   	font: 14px calibri, Helvetica, Sans-serif;
    	border: 1px solid #121314;
    	border-top: 1px solid #2b2e30;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	overflow:visible;
		line-height:7px;
}

#nav ul {
	margin:0;
	padding:0;
	list-style:none;
}

#nav ul li {
	float:left;
}

#nav ul li a {
   	float: left;
	color:#d4d4d4;
    	padding: 8px 20px;  /* change the height of whole menu*/
	text-decoration:none;
    	background:#3C4042;
 	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
	background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
	background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
	border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
 	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
	
}

#nav ul li a:hover,
#nav ul li:hover > a {
    	color:#FFF;   /* change tabs font hover color */
    	background:#3C4042;
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
	background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
	background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;

}

#nav li ul a:hover, 
#nav ul li li:hover > a  {
    color:#FFF;        /*  change the drop down font color*/
  	background: #5C9ACD;
	background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
	background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
	background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
    	border-bottom: 1px solid rgba(0,0,0,0.6);
    	border-top: 1px solid #7BAED9;
    	text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}



#nav li ul {
	overflow:visible;
    	background:#3C4042;
    	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
    	background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
    	border-radius: 0 0 10px 10px;
    	-moz-border-radius: 0 0 10px 10px;
    	-webkit-border-radius: 0 0 10px 10px;
    	left: -999em;
    	margin: 32px 0 0;        /* change the position of drop down menu, up and down.*/
    	position: absolute;
    	width: 160px;
    	z-index: 9999;
    	box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset; 
    	border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li:hover ul {
    	left: auto;
}

#nav li ul a {
    	background: none;
    	border: 0 none;
    	margin-right: 0;
    	width: 120px;
    	box-shadow: none;
    	-moz-box-shadow: none;
    	-webkit-box-shadow: none;
    	border-bottom: 1px solid transparent;
    	border-top: 1px solid transparent;
}

#nav li li ul {
    	margin: -1px 0 0 160px;
    	-webkit-border-radius: 0 10px 10px 10px;
    	-moz-border-radius: 0 10px 10px 10px;
    	border-radius: 0 10px 10px 10px;
    	visibility:hidden;
}

#nav li li:hover > ul {
    visibility: visible;
}
#nav li:hover > ul {
    left: auto;
}





#nav ul ul li:last-child > a {
	-moz-border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	border-radius:0 0 10px 10px;
}

#nav ul ul ul li:first-child > a {
	-moz-border-radius:0 10px 0 0;
	-webkit-border-radius:0 10px 0 0;
	border-radius:0 10px 0 0;
}

但同样，您可能需要先创建表单或使用AJAX / jQuery，以便将数据发送到服务器。

单击按钮后运行python脚本

2 个答案: