api 调用会重新加载并刷新整个页面，而不仅仅是更新 div

Question

I have this code here.

          <div class="page" id="content-apiservicedemo">
            <div class="container">
            <hr>
            <p>here comes the simple api button</p>
            <button id="btn-call-api" disabled="true" onclick="callApi()">Call Api</button>
  
            <!-- Add a container to hold the response from the call -->
            <pre id="api-call-result"></pre> 
            </div>

I have this on the JS side of things.

    //this is calling the api 

    const callApi = async () => {

  try {

    // Get the access token from the Auth0 client
    const token = await auth0.getTokenSilently();

    // Make the call to the API, setting the token
    // in the Authorization header
    const hostURL1 = "https://localhost:44375/";
    const hostURL2 = "https://testserverxyz.azurewebsites.net/";

    const withoutauthURLendpoint = "WeatherForecast";
    const authURLendpoint = "api/TestWithoutDB/getvalue2";
    const response = await fetch(hostURL2 + authURLendpoint, {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });

    // Fetch the JSON result
    const responseData = await response.json();

    // Display the result in the output element
    const responseElement = document.getElementById("api-call-result");

    responseElement.innerText = JSON.stringify(responseData, {}, 2);

    } catch (e) {
        // Display errors in the console
        console.error(e);
      }
    };

This is a single page JS application running on node JS. For some reason, every time I use this button, the entire page is refreshing despite there being no code that asks for the entire page to be refreshed.

Note 1 - Also, i have another version of this code, that runs just fine. Only difference is that I am playing around with some CSS modifications but HTML and JS are identical.

So, is there some CSS that I may have removed which prevented the page from reloading? I thought CSS was about appearance only.

Note 2

Here is the network call of the above code.

OPTIONS /api/TestWithoutDB/getvalue2 undefined
Host: baribasicidentityapiserverjuly28th2020.azurewebsites.net
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:79.0) Gecko/20100101 Firefox/79.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: GET
Access-Control-Request-Headers: authorization
Referer: http://localhost:3000/apiservicedemo
Origin: http://localhost:3000
Connection: keep-alive

Based on the above call, I am coming to the conclusion that, by the time the network call actually takes place, the token has been wiped out, and the call is being rejected. Now, the token wiping part is as per my design, so that is not the problem. But, I am including that information to indicate that the reload happens before the code execution for the api call happens.

I have confirmed that when I do make the call, I am logged in and a token is definitely arriving into the call.

Answer 1

Glad you were able to figure this out by removing the form tag.

If you're interested in knowing more about why this is happening, it is related to the default action of your form being submitted by the button (happens with all forms, not just express js). It appears as if it's refreshing because you likely don't have an action attribute pointing at a script on the form, so it POSTs to itself/same page.

In the future, you could make use of the Event.preventDefault function to nullify the submission.

Answer 2

Okay, so, I dont if anyone else will face a similar problem but I will post a solution here.

It was a good thing that I had a working sample to compare, line by line. The issue had to do with the container I was using.

My entire app was enclosed in a form tag. (I had borrowed this code from a template that was also using many buttons but that was plain vanilla JS. This is also a plain vanilla JS but enclosed in a node JS Express front end app).

Looks like the way the express js app is setup, it takes any button being clicked and used to make an API call as a way to submit a form with entered values.

So, I replaced the form tag with a div tag, and the issue is resolved. the API is being called.