ส่งข้อมูลจากกล่องข้อความไปยัง Flask?


93

ฉันสงสัยว่ามีวิธีเอาบางอย่างจากกล่องข้อความใน HTML ป้อนลงในขวดแล้วแยกวิเคราะห์ข้อมูลนั้นด้วย Python ฉันคิดว่าสิ่งนี้อาจเกี่ยวข้องกับ JS แต่ฉันคิดผิด ความคิดใด ๆ ?


ทำไมไม่ใช้รูปแบบ HTML และโพสต์โดยตรง หรือคุณต้องทำแบบอะซิงโครนัส? ในกรณีนี้คุณจะมีสิ่งที่ต้องทำเกี่ยวกับ AJAX :-)
Martijn Pieters

1
ฉันรู้ว่าฉันสามารถใช้รูปแบบ HTML ได้ แต่ฉันจะส่งข้อมูลนั้นไปยังแอพ flask ได้อย่างไร
ollien

คำตอบ:


155

ถ้าคุณไม่ต้องการทำอะไรที่ซับซ้อนมากขึ้นการป้อนข้อมูลจากรูปแบบ HTML ลงใน Flask นั้นค่อนข้างง่าย

  • สร้างมุมมองที่ยอมรับคำขอ POST ( my_form_post)
  • request.formเข้าองค์ประกอบของแบบฟอร์มในพจนานุกรม

templates/my-form.html:

<form method="POST">
    <input name="text">
    <input type="submit">
</form>
from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
def my_form():
    return render_template('my-form.html')

@app.route('/', methods=['POST'])
def my_form_post():
    text = request.form['text']
    processed_text = text.upper()
    return processed_text

นี้เป็นเอกสารขวดเกี่ยวกับการเข้าถึงข้อมูลการร้องขอ

หากคุณต้องการรูปแบบที่มีความซับซ้อนมากขึ้นว่าการตรวจสอบความต้องการแล้วคุณสามารถดูที่WTFormsและวิธีการรวมพวกเขาด้วยขวด

หมายเหตุ: เว้นแต่คุณจะมีข้อ จำกัด อื่น ๆ คุณไม่จำเป็นต้องใช้ JavaScript เลยในการส่งข้อมูลของคุณ (แม้ว่าคุณจะสามารถใช้งานได้)


1
เฮ้มันใช้งานได้ครั้งเดียว แต่ตอนนี้เกิดข้อผิดพลาด 500 ความคิดใด ๆ ?
ollien

มันควรจะใช้งานได้ดี ... ใส่ไว้app.debug = Trueก่อนapp.run()เพื่อให้คุณได้รับข้อยกเว้นและการตรวจสอบย้อนกลับของข้อผิดพลาด
pacha

ใช่ฉันลืมไปแล้วฉันเป็นคนงี่เง่าและลืมใส่ HTML ของฉันในโฟลเดอร์เทมเพลต
ollien

ฉันเสียเวลานิดหน่อยในการพยายามทำสิ่งนี้กับ textarea ที่ใหญ่กว่าแทนที่จะเป็นกล่องข้อความหากใครต้องการทำสิ่งนี้ด้วย Flask วิธีแก้ปัญหาอยู่ที่นี่
กระวาน

@cardamom ฉันไม่เข้าใจจริงๆว่าคุณหมายถึงอะไร การใช้พื้นที่ข้อความหรือการป้อนข้อความประเภทไม่ได้เปลี่ยนวิธีแก้ปัญหา แต่อย่างใด (สิ่งที่คุณกำลังเชื่อมโยงนั้นเหมือนกับข้อความนี้ทุกประการ) คุณไม่จำเป็นต้องเปลี่ยนด้าน Python เพียงแค่แทนที่<input type="text" name="text">ด้วย<textarea name="text"></textarea>และคุณก็จะสบายดี
pacha

9

ประกาศจุดสิ้นสุดของขวดเพื่อยอมรับประเภทอินพุต POST จากนั้นทำตามขั้นตอนที่จำเป็น ใช้ jQuery เพื่อโพสต์ข้อมูล

from flask import request

@app.route('/parse_data', methods=['GET', 'POST'])
def parse_data(data):
    if request.method == "POST":
         #perform action here
var value = $('.textbox').val();
$.ajax({
  type: 'POST',
  url: "{{ url_for('parse_data') }}",
  data: JSON.stringify(value),
  contentType: 'application/json',
  success: function(data){
    // do something with the received data
  }
});

2

การโต้ตอบทั้งหมดระหว่างเซิร์ฟเวอร์ (แอปขวดของคุณ) และไคลเอนต์ (เบราว์เซอร์) เป็นไปตามคำขอและการตอบสนอง เมื่อผู้ใช้กดปุ่มส่งในแบบฟอร์มของคุณเบราว์เซอร์ของเขาจะส่งคำขอพร้อมแบบฟอร์มนี้ไปยังเซิร์ฟเวอร์ของคุณ (แอปขวด) และคุณจะได้รับเนื้อหาในแบบฟอร์มเช่น:

request.args.get('form_name')

1

สมมติว่าคุณได้ทราบวิธีการเขียนมุมมองในการFlaskตอบสนองที่ไปยัง URL สร้างหนึ่งที่อ่านrequest.postข้อมูล หากต้องการเพิ่มinput boxข้อมูลในโพสต์นี้ให้สร้างแบบฟอร์มบนเพจของคุณด้วยกล่องข้อความ จากนั้นคุณสามารถใช้jqueryทำ

var data = $('#<form-id>').serialize()

จากนั้นโพสต์ไปยังมุมมองของคุณแบบอะซิงโครนัสโดยใช้สิ่งต่างๆดังต่อไปนี้

$.post('<your view url>', function(data) {
  $('.result').html(data);
});

0

สิ่งนี้ได้ผลสำหรับฉัน

def parse_data():
    if request.method == "POST":
        data = request.get_json()
        print(data['answers'])
        return render_template('output.html', data=data)
$.ajax({
      type: 'POST',
      url: "/parse_data",
      data: JSON.stringify({values}),
      contentType: "application/json;charset=utf-8",
      dataType: "json",
      success: function(data){
        // do something with the received data
      }
    });
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.