Flask/Python and Ajax












0















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.










share|improve this question



























    0















    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.










    share|improve this question

























      0












      0








      0








      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.










      share|improve this 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 }}℃
      </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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 20 '18 at 21:53









      AndyJAndyJ

      638




      638
























          1 Answer
          1






          active

          oldest

          votes


















          0














          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






          share|improve this answer
























          • 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 '18 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 '18 at 13:57











          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
          });


          }
          });














          draft saved

          draft discarded


















          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









          0














          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






          share|improve this answer
























          • 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 '18 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 '18 at 13:57
















          0














          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






          share|improve this answer
























          • 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 '18 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 '18 at 13:57














          0












          0








          0







          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






          share|improve this answer













          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







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 20 '18 at 22:15









          Sam MasonSam Mason

          3,34711331




          3,34711331













          • 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 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 '18 at 13:57




















          draft saved

          draft discarded




















































          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.




          draft saved


          draft discarded














          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





















































          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







          這個網誌中的熱門文章

          Xamarin.form Move up view when keyboard appear

          Post-Redirect-Get with Spring WebFlux and Thymeleaf

          Anylogic : not able to use stopDelay()