Mit JQuery Rendern in Flask App

-1

Bis jetzt habe ich es geschafft, eine Seite mit einem Textfeld und einer Schaltfläche zu erstellen. Sobald der Benutzer einen Text eingegeben und auf die Schaltfläche geklickt hat, wird das Ergebnis einer Suche (Datenbank) sowohl in der Konsole als auch in der Eingabeaufforderung angezeigt. Ich brauche den Code, um das Ergebnis in einem leeren <div id='empty'>Mit JQuery Rendern in Flask App

gezeigt

@app.route('/search', methods=['POST']) 
def search(): 
name = request.form['name']; 
j=CARDS_COLLECTION.find({'name':"whatever"}) 
for k in j: 
    print k 
print name 
return json.dumps({'status':'OK','name':name}); 


@app.route('/page') 
def page(): 
return render_template('page.html')

Dies ist das Skript auf dem seite.html ist

<script type="text/javascript">$(function() { 
$('button').click(function() { 
    var name = $('#txtname').val(); 
    $.ajax({ 
     url: '/search', 
     data: $('form').serialize(), 
     type: 'POST', 
     success: function(response) { 
      console.log(response); 
     }, 
     error: function(error) { 
      console.log(error); 
     } 
    }); 
}); 
});</script>

Quelle

2016-05-06 David Spira

Um das Ergebnis in einem „div“ zu zeigen, sollten Sie Javascript ausführen innen der Ajax-Funktion, innerhalb der Erfolgsfunktion. Sehen Sie sich ein Beispiel an, was Sie tun müssen.

# app.py von Kolben Import Flask, Anfrage, render_template, jsonify

app = Flask(__name__) 


@app.route('/search', methods=['POST']) 
def search(): 
    # this works and I don't know why because we should use 
    # request.get_json() to parse json data... 
    name = request.form['name'] 
    # using the jsonify function to turn dict into json and send 
    # the correct HTTP header 
    return jsonify({"status": "OK", "name": name}), 200 


@app.route('/') 
def hello_world(): 
    return render_template("search.html") 


if __name__ == '__main__': 
    app.run(debug=True)

und die HTML-Seite:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 

<input id="search_field" type="text"> 
<button>Search!!</button> 

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
$('button').click(function() { 
    // we dont use form because we wanna send data with javascript 
    // so we get the value of input into a variable 
    var name_field = $("#search_field").val(); 
    // I wanna send the data as json documento, so we create one to put our values 
    var my_data = { 
     name: name_field 
    }; 
    $.ajax({ 
     url: "/search", 
     data: my_data, // here come the json data 
     type: 'POST', 
     success: function(response) { 
      // I said that you must use parseJSON but I was wrong 
      // because the data is already a JSON document and try to 
      // parse it again leads to an error... so, don't use it for now 
      // more details http://api.jquery.com/jquery.parsejson/ 
      // var data = $.parseJSON(response); 

      // just to see what is comming from server 
      console.log(response); 

      // now we will create a div above every element on body 
      // notice that I'm escaping the " for id... there are many ways and methods 
      // to insert html or text, aways depends on your needs. 
      $('body').prepend("<div id=\"empty\">"+response.name+"</div>"); 
     }, 
     error: function(error) { 
      console.log(error); 
     } 
    }); 
}); 
}); 
</script> 

</body> 
</html>

Quelle

2016-05-06 23:11:54

Danke für die Antwort, aber wenn ich etwas falsch verstanden, Ihren Code fügt auf der Seite denselben Text ein, den der Benutzer in das Feld eingegeben hat. Ich brauche es, um auf der Seite das Ergebnis der Suche einzufügen, die in der Funktion/search durchgeführt wurde. @xFilipe –

Der Code fügt innerhalb eines div-Tags ein, um das div selbst einzufügen, müssen Sie die append-Funktion oder so etwas wie ... Zeigen Sie mir mehr Details über den Code und wo es eingefügt werden soll, damit ich es für Sie machen kann –

ich es geschafft, den Code zu bearbeiten, ist die Suchfunktion nun wie folgt: @ app.route ('/ search', Methoden = [ 'POST']) def suchen(): \t temp = [] \t Name = request.form ['Name']; \t j = CARDS_COLLECTION.find ({'funktionalername': {'$ regex': name.lower()}}, {"_ id": 1, "url": 1, "name": 1, 'setzt': 1 'functionalname': 1}) \t name = "" \t für k in j: \t \t name = Name + str (k) \t \t \t return json.dumps ({ 'Status': 'OK ','Name Name}); –

Mit JQuery Rendern in Flask App

Antwort

Verwandte Themen