Flask/Python and Ajax
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 }}℃
</div>
<div id="heatingtarget">
<i class="fas fa-fire"></i> {{ targetTemp }}℃ <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.
python ajax templates flask
asked Nov 20 at 21:53
AndyJ
638
add a comment |
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 }}℃
</div>
<div id="heatingtarget">
<i class="fas fa-fire"></i> {{ targetTemp }}℃ <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.
python ajax templates flask
asked Nov 20 at 21:53
AndyJ
638
add a comment |
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 }}℃
</div>
<div id="heatingtarget">
<i class="fas fa-fire"></i> {{ targetTemp }}℃ <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.
python ajax templates flask
asked Nov 20 at 21:53
AndyJ
638
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 }}℃
</div>
<div id="heatingtarget">
<i class="fas fa-fire"></i> {{ targetTemp }}℃ <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.
python ajax templates flask
python ajax templates flask
asked Nov 20 at 21:53
AndyJ
638
asked Nov 20 at 21:53
AndyJ
638
asked Nov 20 at 21:53
AndyJ
638
asked Nov 20 at 21:53
AndyJ
638
asked Nov 20 at 21:53
AndyJ
638
638
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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
answered Nov 20 at 22:15
Sam Mason
2,55011226
Ok, thank you. I think you've answered the question. If I'm right, then what you're saying is that the (msg) bit will hold the response which could be one variable or lots of variables or anything else I choose; but it's the (msg) bit that is important.
– AndyJ
Nov 21 at 6:48
themsgis the "thing" that comes back from the server… your existing code was treating it as a single bit of html, switching it to a JSON object lets you put more in the response as well as helping with separating concerns — server just generates a nice formal JSON object, the web client worries about putting it in the right place
– Sam Mason
Nov 21 at 13:57
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402164%2fflask-python-and-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Nov 20 at 22:15
Sam Mason
2,55011226
Ok, thank you. I think you've answered the question. If I'm right, then what you're saying is that the (msg) bit will hold the response which could be one variable or lots of variables or anything else I choose; but it's the (msg) bit that is important.
– AndyJ
Nov 21 at 6:48
themsgis the "thing" that comes back from the server… your existing code was treating it as a single bit of html, switching it to a JSON object lets you put more in the response as well as helping with separating concerns — server just generates a nice formal JSON object, the web client worries about putting it in the right place
– Sam Mason
Nov 21 at 13:57
add a comment |
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
answered Nov 20 at 22:15
Sam Mason
2,55011226
Ok, thank you. I think you've answered the question. If I'm right, then what you're saying is that the (msg) bit will hold the response which could be one variable or lots of variables or anything else I choose; but it's the (msg) bit that is important.
– AndyJ
Nov 21 at 6:48
themsgis the "thing" that comes back from the server… your existing code was treating it as a single bit of html, switching it to a JSON object lets you put more in the response as well as helping with separating concerns — server just generates a nice formal JSON object, the web client worries about putting it in the right place
– Sam Mason
Nov 21 at 13:57
add a comment |
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
answered Nov 20 at 22:15
Sam Mason
2,55011226
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
answered Nov 20 at 22:15
Sam Mason
2,55011226
answered Nov 20 at 22:15
Sam Mason
2,55011226
answered Nov 20 at 22:15
Sam Mason
2,55011226
answered Nov 20 at 22:15
Sam Mason
2,55011226
2,55011226
Ok, thank you. I think you've answered the question. If I'm right, then what you're saying is that the (msg) bit will hold the response which could be one variable or lots of variables or anything else I choose; but it's the (msg) bit that is important.
– AndyJ
Nov 21 at 6:48
themsgis the "thing" that comes back from the server… your existing code was treating it as a single bit of html, switching it to a JSON object lets you put more in the response as well as helping with separating concerns — server just generates a nice formal JSON object, the web client worries about putting it in the right place
– Sam Mason
Nov 21 at 13:57
add a comment |
Ok, thank you. I think you've answered the question. If I'm right, then what you're saying is that the (msg) bit will hold the response which could be one variable or lots of variables or anything else I choose; but it's the (msg) bit that is important.
– AndyJ
Nov 21 at 6:48
themsgis the "thing" that comes back from the server… your existing code was treating it as a single bit of html, switching it to a JSON object lets you put more in the response as well as helping with separating concerns — server just generates a nice formal JSON object, the web client worries about putting it in the right place
– Sam Mason
Nov 21 at 13:57
Ok, thank you. I think you've answered the question. If I'm right, then what you're saying is that the (msg) bit will hold the response which could be one variable or lots of variables or anything else I choose; but it's the (msg) bit that is important.
– AndyJ
Nov 21 at 6:48
Ok, thank you. I think you've answered the question. If I'm right, then what you're saying is that the (msg) bit will hold the response which could be one variable or lots of variables or anything else I choose; but it's the (msg) bit that is important.
– AndyJ
Nov 21 at 6:48
the
msg is the "thing" that comes back from the server… your existing code was treating it as a single bit of html, switching it to a JSON object lets you put more in the response as well as helping with separating concerns — server just generates a nice formal JSON object, the web client worries about putting it in the right place– Sam Mason
Nov 21 at 13:57
the
msg is the "thing" that comes back from the server… your existing code was treating it as a single bit of html, switching it to a JSON object lets you put more in the response as well as helping with separating concerns — server just generates a nice formal JSON object, the web client worries about putting it in the right place– Sam Mason
Nov 21 at 13:57
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402164%2fflask-python-and-ajax%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
