如何将HTML字符串从flask应用程序传递到HTML模板作为DOM元素,然后是appendChild

问题描述 投票:3回答:2

CONTEXT

我创建了一个Flask Web应用程序,在网页上有一个表单,然后我希望用户立即在表单右侧看到该表单的结果。提交表单时,会在后端激活python脚本,这会生成一个HTML结果文件(authorList.html) - 这是我想要在表单旁边显示的内容。

问题

根据我的理解,这需要我使用Ajax,所以我可以在不刷新页面的情况下获得结果,但是我不熟悉如何将HTML结果文件从flask app.py传递到HTML模板然后追加作为DOM树的节点。

1)我到目前为止设置了我的代码,以便调用upload路由,然后呈现index.html,然后其中的JS代码返回results路由,然后再次呈现index.html,将HTML结果文件作为一个字符串。我已经在index.html中部分设置了HTML-string-to-DOM-element转换步骤,其中<p>Results should display here.</p>(因为这是我想要显示HTML结果文件的页面的一部分)但我不确定我是否我正走在正确的轨道上,以及如何继续做追加儿童。

2)此外,当我尝试以下方式运行此代码时,我得到Uncaught SyntaxError: Unexpected token ;的JS错误指向index.html的这一行:var d = document.createElement('div'); d.innerHTML = ; return d.firstChild; ...是因为我没有在Flask上正确传递data变量app方面? (根据代码解决和更新)

(注意:我不熟悉JS,所以如果这看起来很简单,我会提前道歉!)

源代码

app.朋友:

@app.route("/", methods=['GET', 'POST'])
def upload():
    return render_template('index.html', template_file=app.config['TEMPLATE_FILE'])


@app.route("/results", methods=['POST'])
def results():
    data = []
    if request.method == 'POST':
            if request.form['affiliation'] == "letter":
                affiliation = "let"
            elif request.form['affiliation'] == "number":
                affiliation = "num"

            proc = subprocess.Popen('python author_script.py {} -p {} -s {} -m {}'.format(file.filename, period, space, affiliation), shell=True, stdout=subprocess.PIPE)
            while proc.poll() is None:
                time.sleep(0.5)

            # Convert resulting HTML file to a string and pass to index.html
            with open('authorList.html') as f:
                data.append("".join(f.readlines()))
    return render_template('index.html', data=''.join(data))

index.html的:

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script>
    $(document).ready(function() {
        $('form').submit(function (e) {
            var url = "{{ url_for('results') }}"; 
            $.ajax({
                type: "POST",
                url: url,
                data: $('form').serialize(), 
                success: function (data) {
                    console.log(data) 
                }
            });
            e.preventDefault(); 
        });
    });
</script>

</head>

<body>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
          <div>
            <br>
            <p>Download the template file below and re-upload with your custom author information:</p>
            <a href="static/ExampleAuthorList.txt" download="Authors_Template.txt"><button type="button">Download</button></a><br><br>
            <form action="" id="myform" method=post enctype=multipart/form-data>
            <div id="buttonDiv">
              <p><input type=file name=file value="Choose File">
              <p>Mark affiliations with:</p>
              <input type="radio" name="affiliation" value="number" id="number" class="form-radio" checked><label for="number">Number</label><br>
              <input type="radio" name="affiliation" value="letter" id="letter" class="form-radio"><label for="letter">Letter</label>
              <br><br>
            </div>
            <input type=submit value=Upload></p>
            </form>
          </div>
    </div>
    <div class="col-sm-6">
        <div>
          <p>Results should display here.</p>
          <script>
            var d = document.createElement('div'); d.innerHTML = "{{ data }}"; return d.firstChild;
            # Need code for appending child
          </script>
        </div>
    </div>
  </div>
</div>

</body>

</html>

UPDATE

我在我的JS代码中尝试了以下更改(在index.html中),但我仍然没有在主页上看到任何结果。

  <script>
    var data 
    $(document).ready(function() {
        $('form').submit(function (e) {
            var url = "{{ url_for('results') }}"; // send the form data here.
            $.ajax({
              type: "POST",
              url: url,
              data: $('form').serialize(), 
              success: function (data) {
                var d = document.createElement('div');
                d.innerHTML = data;
                $(".my-results").html(data);
              }
            });
            e.preventDefault(); // block the traditional submission of the form.
        });
    });
</script>

.
.
.
.
        <div>
          <br>
          <p class="my-results">Results should display here.</p>
        </div>
    </div>

更新2:完整app.py

@app.route("/", methods=['GET', 'POST'])
def upload():
    return render_template('index.html', template_file=app.config['TEMPLATE_FILE'])

@app.route("/results", methods=['GET', 'POST'])
def results():
    if 'file' not in request.files:
        flash('No file chosen', 'danger')
        return redirect(request.url)
    file = request.files['file']
    if file.filename == '':
        flash('No selected file', 'danger')
        return redirect(request.url)
    filename = secure_filename(file.filename)
    if not allowed_file(file.filename):
        flash('Incorrect file extension. Must be .TXT!', 'danger')
    if places_exist(os.path.join(app.config['UPLOAD_FOLDER'], filename)) == False:
        flash('There is an affiliation missing from your Place list. Please re-try.', 'danger')
        return redirect(request.url)
    else:
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))

        os.chdir('/Users/cdastmalchi/Desktop/author_script/')

        if request.form['affiliation'] == "letter":
            affiliation = "let"
        elif request.form['affiliation'] == "number":
            affiliation = "num"

        if "Yes sep period" in request.form.getlist('period'):
            period = "y"
        else:
            period = "n"
        if "Yes sep space" in request.form.getlist('space'):
            space = "y"
        else:
            space = "n"

        proc = subprocess.Popen('python author_script.py {} -p {} -s {} -m {}'.format(file.filename, period, space, affiliation), shell=True, stdout=subprocess.PIPE)
        # Wait until process terminates
        while proc.poll() is None:
            time.sleep(0.5)

        with open("authorList.html") as f:
            data = ''.join(f.readlines())
            print(data)
        return data
javascript jquery html ajax flask
2个回答
1
投票

要动态上传文件,您需要在Qavascript中使用带有FormData请求的POST对象。此解决方案发送两个单独的请求:带有文件数据的POST请求和带有附加值的GET请求。文件名存储在flask.session中,以便在计算最终数据时在GET请求的上下文中使用:

首先,在你的app.py中,你需要三条路线:渲染index.html的路线,处理文件数据的路线,最后是返回html的路线:

app.py

import flask, string, random
import json
app = flask.Flask(__name__)
app.secret_key = ''.join(random.choice(string.ascii_letters) for _ in range(20)) #needed to use flask.session
@app.route('/', methods=['GET'])
def home():
   return flask.render_template('index.html')

@app.route('/process_file', methods=['POST'])
def process_file():
  #here, you can run all the checks as before, but instead of flash, you can return jsonified results to read in the front-end
  if 'file' not in flask.request.files or not flask.request.files['file'].filename:
     return flask.jsonify({'result':'False', 'message':'no files selected'})
  file = flask.request.files['file']
  filename = secure_filename(file.filename)
  if not allowed_file(file.filename):
     return flask.jsonify({'result':'False', 'message':'Must be TXT file!'})
  if not places_exist(os.path.join(app.config['UPLOAD_FOLDER'], filename)):
     return flask.jsonify({'result':'False', 'message':'There is an affiliation missing from your Place list. Please re-try.'})
  file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
  flask.session['filename'] = filename
  return flask.jsonify({'result':'True'})

@app.route('/upload_vals')
def upload_vals():
  payload = json.loads(flask.request.args.get('payload'))
  #do something with payload
  #payload will now be in the form:
  #{'affiliation':'Number', 'period':'no', 'space':'yes'}
  proc = subprocess.Popen('python author_script.py {} -p {} -s {} -m {}'.format(flask.session['filename'], 'y' if _checked['period'] else 'n', 'y' if _checked['space'] else 'n', aff[:3]), shell=True, stdout=subprocess.PIPE)
  while proc.poll() is None:
     time.sleep(0.5)
  with open("authorList.html") as f:
    data = ''.join(f.readlines())
  return flask.jsonify({'data':data})

index.html

<html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  </head>
  <body>
  </body>
    <div class='wrapper'>
      <p>Download the template file below and re-upload with your custom author information:</p>
      <a href="static/ExampleAuthorList.txt" download="Authors_Template.txt"><button type="button">Download</button></a><br><br>
        <form action="" id="myform" method=post enctype=multipart/form-data>
        <input type=file name=file value="Choose File">
           <p class='error_message'></p>
        </form>
         <div id="buttonDiv"> 
            <p>Mark affiliations with:</p> 
            <input type="radio" name="affiliation" value="number" data-key='affiliation' data-value='number' class="form-radio main_checkbox" checked><label for="number">Number</label><br> 
            <input type="radio" name="affiliation" value="letter" data-key='affiliation' data-value='letter' class="form-radio main_checkbox"><label for="letter">Letter</label><br> 
           <p>Separate initials with period:</p> 
           <input type="radio" name="period" value="separated" data-key='period' data-value='yes' class="form-radio period"><label for="period">Yes</label><br> 
           <input type="radio" name="period" data-key='period' data-value='no' value="separated" class="form-radio period" checked><label for="period">No</label> 
           <br> 
           <p>Separate initials with space:</p> 
           <input type="radio" name="space" value="separated" data-key='space' data-value='yes' class="form-radio spacing"><label for="space">Yes</label><br> 
           <input type="radio" name="space" data-key='space' data-value='no' value="separated" class="form-radio spacing" checked><label for="space">No</label><br> 
          <br><br> 
         </div> 
        <button class='submit_data'>Submit</button>
        <div>
         <br>
         <p class="my-results"></p>
        </div>
      </div>
    <script>
      $(document).ready(function(){
        $('.wrapper').on('click', '.submit_data', function(){
             var form_data = new FormData($('#myform')[0]);
             var flag = true;
             $.ajax({
               type: 'POST',
               url: '/process_file',
               data: form_data,
               contentType: false,
               cache: false,
               processData: false,
               success: function(data) {
                 if (data.result === 'False'){
                    $('.error_message').html(data.message)
                    flag = false;
                 }
              },
           });
           if (flag){
             var payload = {};
             $('.form-radio').each(function(){
                if ($(this).prop('checked')){
                  payload[$(this).data('key')] = $(this).data('value');
                }
             });
             $.ajax({
               url: "/upload_vals",
               type: "get",
               data: {'payload':JSON.stringify(payload)},
               success: function(response) {
                 $(".my-results").html(response.data);
               },
              });
           }
        });
      });
    </script>
</html>

在您更新的app.py中,有点不清楚periodspace形式值来自HTML,但是,在上面的index.html中,提供了两个额外的复选框来从用户接收此值。


1
投票

要修复语法错误,请在{{ data }}周围加上引号。

d.innerHTML = "{{ data }}";

如果没有引号,结果就是

d.innerHTML = ;

但不要担心,因为无论如何你需要移动该代码。

第二个<script>标签中的JavaScript不知道data,因为它超出了范围。您需要将该代码移动到$.ajax成功方法中。这应该更好:

$.ajax({
  type: "POST",
  url: url,
  data: $('form').serialize(), 
  success: function (data) {
    var d = document.createElement('div');
    d.innerHTML = data;
  }
});
© www.soinside.com 2019 - 2024. All rights reserved.