Performing ajax with Python Flask

Question

I'm trying to do something simple yet not able to figure it out because of no experience working with scripting languages and even after going through some tutorials. The closest match to what I want to kind of do is found at this link .

When someone clicks on the following link I want value attribute to be returned to the same template that this link I'm creating is in so I can use it for an array's index argument.

<a href="/disable?server={{count + loop.index0}}" 
id="serverCount" 
value="{{ count + loop.index0 }}">
Click this to Disable </a>

The JavaScript/json/ajax I have is:

{% block scripts %}
    {{ super() }}
    <script type=text/javascript>
$(function() {
  $('a#serverCount').bind('click', function() {
    $.getJSON('/disable', {
      a: document.getElementById("serverCount").getAttribute("value")
    }, function(data) {
      $("#result").text(data.result);
    });
    return false;
  });
});
    </script>
{% endblock %}

I'm sure someone will be able to realize what I have definitely does not work. I'm just posting the code I've been experimenting with.

In app.py I have:

@app.route('/disable', methods=['GET', 'POST'])
def disableBtn():
    valueOfButton = request.args.get['serverCount']
    return jsonify(result = valueOfButton)

Can someone explain what the correct way of doing this will be? Much appreciated.

Answer 1

Since you're already using jQuery why not go the simple jQuery way of getting the value?

$('#serverCount').val();

So typically when I make an ajax call where I'm expecting JSON data back and I'm sending JSON to the server. I would do something like this;

$(function() {
    $('a#serverCount').bind('click', function() {
        $.ajax({
            method: "POST",
            url: "/url/to/your/server/method",
            dataType: 'json',
            data: { serverCount: $('#serverCount').val() }
            })
            .done(function(msgBackFromServer) {
                alert("Data Sent to server" + msgBackFromServer);
            });
    });
});

now you'll notice the url needs to be a method that can be hit on your server, some sort or page view that you have. I'm not familiar in Flask, but I would imagine it's similar to Django in some ways.

Method POST is because your sending data. On your flask server, you should be able to receive JSON and parse it into a Python dictionary (or maybe there is some other flask specific tool).

Your response from this view is what is passed back to the .done function of the ajax call. This could be whatever data you want it to be. It will come from flask. I'm sure flask can send it back as a JSON object or it could just be a string. If it's a JSON object you could access different parts of it with the . notation. Something like msgBackFromServer.title or msgBackFromServer.message etc...

Answer 2

This is not AJAX. What you seem to be trying to do is edit javascript using JINJA and send the javascript to the client. Do NOT do this. Instead, your javascript files should be static and you should request the data itself from the flask app.