Search on blog:

Python: How to use AJAX in Flask using jQuery.

After all there was two problems:

  • HTML wasn't serve from flask/server. And browser could block it for security reason. I put HTML directly in function index() but later you can use render_template("filename.html")

  • you forgot to load javascript jQuery library.

Other: Flask - Calling python function on button OnClick event

from flask import Flask, jsonify
from flask_cors import CORS, cross_origin


app = Flask(__name__)
CORS(app, support_credentials=True)


@app.route('/')
def index():
    return """
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type=text/javascript>
   $(function() {
     $('a#sender').bind('click', function() {
       $.getJSON('/background_process_test',
         function(data) {
           console.log(data);
           window.alert(data['success'])  
         });
       return false; // stop <a> to send normal request
     });
   });
</script>

<form>
    <a href=# id="sender"><button>Send AJAX</button></a>
</form>

</div>"""

@app.route('/background_process_test')
@cross_origin(supports_credentials=True)
def background_process_test():
    print("Hello AJAX")
    return jsonify({'success': 'OK'})


if __name__ == "__main__":
    app.run(host='0.0.0.0', port=8000)

Notatki:

Stackoverflow Problem with Ajax and flask, what is the problem?

Python: How to use AJAX in Flask using jQuery or fetch

HTML:

<script>

    data = {'ID': 'foobar'};

    $.ajax({
        type: "POST",
        url: "/test/ajax",
        contentType: 'application/json;charset=UTF-8',
        data: JSON.stringify(data, null, '\t'),
        dataType: 'json',
        success: function(data) {
            window.location.href = data['url']
        },
        error: function(response) {
            alert(response)
        },
    });

</script>  

Flask:

@app.route('/test/ajax', methods=['GET', 'POST'])
def test_ajax():

    if request …

Python: Jak użyć AJAX w Flask za pomocą jQuery lub fetch.

HTML:

<script>

    data = {'ID': 'foobar'};

    $.ajax({
        type: "POST",
        url: "/test/ajax",
        contentType: 'application/json;charset=UTF-8',
        data: JSON.stringify(data, null, '\t'),
        dataType: 'json',
        success: function(data) {
            window.location.href = data['url']
        },
        error: function(response) {
            alert(response)
        },
    });

</script>  

Flask:

@app.route('/test/ajax', methods=['GET', 'POST'])
def test_ajax():

    if request …

Python: How to use JavaScript in Flask to create dynamic updated page without reloading to display suggestions.

app.py

from flask import Flask, render_template, request
import requests
from bs4 import BeautifulSoup


app = Flask(__name__)


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


@app.route('/suggestions')
def suggestions():
    text = request.args.get('jsdata')

    suggestions_list = []

    if text:
        r = requests.get('http://suggestqueries.google.com/complete/search?output=toolbar&hl …

Python: Jak użyć JavaScript w Flask aby stworzyć dynamicznie aktualizującą się stronę bez jej przeładowywania aby wyświetlać sugestie.

app.py

from flask import Flask, render_template, request
import requests
from bs4 import BeautifulSoup


app = Flask(__name__)


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


@app.route('/suggestions')
def suggestions():
    text = request.args.get('jsdata')

    suggestions_list = []

    if text:
        r = requests.get('http://suggestqueries.google.com/complete/search?output=toolbar&hl …

« Page: 1 / 1 »