Python Flask:单击通过单击另一个按钮呈现的按钮

时间:2018-07-23 12:31:14

标签: python flask

我是Flask的新手,我正在尝试构建一个简单的Web应用程序。基本上,我在主页上有一个文本输入框和一个提交按钮。单击提交后,它会根据输入的文本显示一些结果(目前,它已硬编码在下面的代码中)。

我想要的是当您单击提交时,它不仅应该显示结果,而且应该显示一个将输入的文本添加到特定文件的按钮。但是,我正在努力使它起作用(“添加到数据集”按钮没有任何作用)。

这是我现在拥有的:

app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
@app.route('/index', methods=['GET', 'POST'])
def index():
    if request.method == 'GET':
        return render_template('index.html')

    # if submit button is clicked
    if request.form['submit'] == 'Submit':
        # get the text from the form that was filled in
        input_text = request.form['text']

        final_result = 'stackoverflow rocks'

        return render_template('index.html', result=final_result, text=input_text)

    if request.form['add-dataset'] == 'Add to dataset':
        f = open('dataset/dataset.tsv', 'a')
        f.write(input_text)

index.html:

<!doctype html>
<head>
    <link rel="stylesheet" media="screen" href ="static/bootstrap.min.css">
    <link rel="stylesheet" href="static/bootstrap-theme.min.css">
    <meta name="viewport" content = "width=device-width, initial-scale=1.0">
</head>
<br/>
<div class="container">
    <form action="/" method="post" role="form">
        <div class="form-group">
            <label for="text">Text:</label>
            <input type="text" class="form-control" name="text" placeholder="Input sentence here">
            <br />
        </div>
        <input type="submit" name="submit" value="Submit" class="btn btn-success">
    </form>
    <br/>

    {% if result is not none %}
        <div class="alert alert-success">
            {{ result }}
        </div>
        <h2>Add to dataset</h2>
        <br/><input type="submit" name="add-dataset" value="Add to dataset" class="btn btn-success">
    {% endif %} 
</div>
</html>

2 个答案:

答案 0 :(得分:1)

想知道...为什么不能在按钮上添加onClick属性,所以当您单击按钮时,您会处理类似

HTML:

router.get('/edit-page/:slug', (req, res) => {
  Page.findOne({slug : req.params.slug}).then((page) => {
    if(!page) { //if page not exist in db
      return res.status(404).send('Page not found');
    }
    res.render('admin/edit_page', { //page  exist
      title: page.title,
      slug: page.slug,
      content: page.content,
      id: page._id
    });
  }).catch((e) => {//bad request 
    res.status(400).send(e);
  });
});

使用fetch API而不是alert来将数据发送到服务器或执行您想做的任何事情

API

<input type="submit" onclick="(function(){
                               alert('Hey i am calling');
                               })();" />

答案 1 :(得分:0)

第二个

 <input>

丢失了

 <form>

所以浏览器什么也不做

尝试一下:

python:

if request.method=='POST':
    input_text=request.form['text']
    if request.form['submit']=='Submit':
  final_result = 'stackoverflow rocks'
  return render_template('index.html', result=final_result, text=input_text)
    elif request.form['action']=='addToDataset':
  f = open('dataset/dataset.tsv', 'a')
  f.write(input_text)
        return redirect(url_for('index'))
    else:
        render_template('index.html')
else:
    return render_template('index.html')

html:

  <div class="container">
        <form method="post" role="form">
            <div class="form-group">
                <label for="text">Text:</label>
                <input type="text" class="form-control" name="text" placeholder="Input sentence here">
                <br />
            </div>
            <input type="submit" name="submit" value="Submit" class="btn btn-success">
        </form>
        <br/>

        {% if result is not none %}
            <div class="alert alert-success">
                {{ result }}
            </div>
            <h2>Add to dataset</h2>
            <br/>
            <form method="post" role="form">
                <div class="form-group">
                    <label for="text">Text:</label>
                    <input type="text" class="form-control" name="text" placeholder="Input sentence here">
                    <br />
                </div>
                <input type="submit" name="submit" value="addToDataset" class="btn btn-success">
            </form>
        {% endif %} 
    </div>