Flask / Python和Ajax

Question

I found this which looks very close to what I'm trying to achieve. This is my first Python project and I know nothing about Ajax so I'm not sure what I'm looking at:

Execute python script -- Ajax and Flask

I get the first box with the Flask route - I'm doing that, but with lots of variable.

I get the second box with the html that displays the variable passed from the Flask route.

It's the last box that I'm struggling with.

In my template I have:

<div id="insidetemp">
    <i class="fas fa-thermometer-half"></i> {{ intTemp }}&#8451;
</div>
<div id="heatingtarget">
    <i class="fas fa-fire"></i> {{ targetTemp }}&#8451; <i class="far fa-clock sm"></i>
</div>

These are all generated from my / route.

He has:

function cputemp2() {
    $.ajax({
        type: "POST",
        url: "/cputemp",
        dataType: "html",
        success: function(msg) {
            console.log(msg);
            $("#swiss").html(msg);
        },
        error: function (xhr, status, error) {
            console.log(error);
        }
    });
}

So, I guess I can change the name of the function. I'd change the URL to /. I'd change the id to #insidetemp to target the div in my template.

I'm going to take a stab at the first bit:

function syncvalues() {
        $.ajax({
            type: "POST",
            url: "/",
            dataType: "html",
            success: function(msg) {
                console.log(msg);
                $("#insidetemp").html(msg);
            },
            error: function (xhr, status, error) {
                console.log(error);
            }
        });
    }

But how would I add more variables? If someone can get me started with 2 variables then I'm hoping I can extend that to 10.

Answer 1

one way would be to have your endpoint return a JSON encoded dictionary, like:

{
    "insidetemp": 37,
    "fanspeed": 2800
}

and then parse this in the browser using JSON:

let data = JSON.parse(msg)

and then get values out as you want

there are various tutorials around that describe this sort of thing much better