How will I use host HTML on azure web app and use Ajax of HTML page to call another web app?

2020-06-18T17:17:16.87+00:00

I am new in azure web app and having some issue with hosting HTML on azure portal and ajax call. I am having two critical issues.

First issue, I have a HTML page which I want to host on azure web app. Running the below code works but eventually it hosts my HTML on windows OS.

az webapp up -n surveyordemohtmlpage --html -g MyResource-Group --plan MyPlan -l westeurope

I have another flask app which I have hosted on linux OS in azure web app. So, I need to host the HTML with same os (linux) similar like flask web app.

The reason behind is that HTML page will call that flask web app using ajax. So, I think both needs to be in same domain.

Moving to my second issue, that how will I use ajax call in HTML page? should I use URL "*https://myflaskapp.azurewebsites.net/flaskfunction*" to call the flak web app?

Any suggestions will help here.

Thanks in advance.

Azure App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
7,341 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Ryan Hill 26,951 Reputation points Microsoft Employee
    2020-06-18T21:06:47.94+00:00

    Hi @MITRADebarthaGECoreTechCyber-2843,

    Since you app is flask app, you can add a requirements.txt to your root folder (if you haven't already) and run az webapp up -n surveyordemohtmlpage -g MyResource-Group --plan MyPlan -l westeurope.

    Using ajax, make sure you have the js library referenced, <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> and towards the bottom of your html add

     $(document).ready(function() {
          $('form').on('submit', function(event) {
            $.ajax({
               data : {
                  emailbody : $('#emailbody').val(),
                  subject: $('#subject').val(),
                      },
                  type : 'POST',
                  url : 'https://myflaskapp.azurewebsites.net/flaskfunction'
                 })
             .done(function(data) {
               Console.log(data);
           });
           event.preventDefault();
           });
     });
    

    where /flaskfunction is

     @app.route('/flaskfunction','POST')
     def flaskfunction:
         """ Process the request body """