फ्लास्क में टेक्स्टबॉक्स से डेटा भेजें?


92

मैं सोच रहा था कि क्या HTML में एक टेक्स्ट बॉक्स से कुछ लेने का कोई तरीका है, इसे फ्लास्क में खिलाएं, फिर उस डेटा को Python के साथ पार्स करें। मैं सोच रहा था कि इसमें कुछ जेएस शामिल हो सकते हैं लेकिन मैं गलत हो सकता हूं। कोई विचार?


एक HTML फॉर्म का उपयोग क्यों न करें और इसे सीधे पोस्ट करें? या क्या आपको इसे अतुल्यकालिक रूप से करने की आवश्यकता है? उस स्थिति में, आपको AJAX पर कुछ पढ़ना होगा। :-)
मार्टिन पीटर्स

1
मुझे पता है कि मैं एक HTML फॉर्म का उपयोग कर सकता हूं, लेकिन मैं उस जानकारी को फ्लास्क ऐप पर कैसे भेजूंगा?
ollian

जवाबों:


154

जब तक आप कुछ अधिक जटिल करना चाहते हैं, फ्लास्क में HTML फॉर्म से डेटा फीड करना बहुत आसान है।

  • एक दृश्य बनाएं जो एक 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 पर नज़र डाल सकते हैं और उन्हें फ्लास्क के साथ कैसे एकीकृत कर सकते हैं ।

नोट: जब तक आप किसी भी अन्य प्रतिबंध है, तुम सच में जावास्क्रिप्ट की जरूरत नहीं है सब पर आपका डेटा भेजने में (हालांकि आप इसका इस्तेमाल कर सकते हैं)।


1
अरे, यह काम किया, एक बार, लेकिन अब एक त्रुटि 500, किसी भी विचार फेंकता है?
ollien

यह ठीक काम करना चाहिए ... app.debug = Trueइससे पहले app.run()कि आप त्रुटि का अपवाद और ट्रेसबैक प्राप्त करें, बस डाल दें ।
पच

हां, मैं इसके बारे में भूल गया, मैं एक बेवकूफ था और अपने टेम्पलेट फ़ोल्डर में अपना HTML डालना भूल गया।
22

मैं समय के एक बड़े textarea के साथ यह करने की कोशिश कर के एक बिट बर्बाद कर दिया, अगर किसी को भी कुप्पी समाधान के साथ ऐसा करने की जरूरत है
इलायची

@cardamom मैं वास्तव में आप क्या मतलब नहीं मिलता है। एक textarea या टाइप टेक्स्ट के इनपुट का उपयोग करने से किसी भी तरह से समाधान नहीं बदलता है (आप जिसे लिंक कर रहे हैं वह बिल्कुल उसी के समान है)। आपको पायथन पक्ष को बदलने की ज़रूरत नहीं है, बस <input type="text" name="text">द्वारा प्रतिस्थापित करें <textarea name="text"></textarea>और आपको ठीक होना चाहिए।
पच

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

यदि आप पहले से ही जानते हैं कि एक url के जवाब में एक दृश्य कैसे लिखना हैFlask , तो 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
      }
    });
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.