вызов api перезагружает и обновляет всю страницу, а не просто обновляет div

Question

У меня здесь есть этот код.

<code>          <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">

У меня это на стороне JS.

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

Это одностраничное приложение JS, работающее на node JS. По какой-то причине каждый раз, когда я использую эту кнопку, вся страница обновляется, несмотря на отсутствие кода, запрашивающего обновление всей страницы.

Примечание 1. Кроме того, у меня есть другая версия этого кода, это работает нормально. Единственная разница в том, что я играю с некоторыми модификациями CSS, но HTML и JS идентичны.

Итак, есть ли какие-то CSS, которые я, возможно, удалил, что помешало перезагрузке страницы ? Я думал, что CSS касается только внешнего вида.

Примечание 2

Вот сетевой вызов указанного выше кода.

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

На основании вышеупомянутого вызова я Я прихожу к выводу, что к тому времени, когда сетевой вызов действительно происходит, токен уничтожен, и вызов отклоняется. Часть очистки токена соответствует моему дизайну, так что проблема не в этом. Но я включаю эту информацию, чтобы указать, что перезагрузка происходит до того, как произойдет выполнение кода для вызова api.

Я подтвердил, что когда я действительно звоню, я вошел в систему, и токен определенно прибывает в звонок.

Answer 1

Рад, что вы смогли выяснить это, удалив тег формы.

Если вам интересно узнать больше о том, почему это происходит, это связано с действием по умолчанию для вашей формы, отправляемой кнопка (происходит со всеми формами, а не только express js). Похоже, что он обновляется, потому что у вас, вероятно, нет атрибута действия, указывающего на скрипт в форме, поэтому он отправляет POST на себя / ту же страницу.

В будущем вы могли бы использовать Функция Event.preventDefault для отмены отправки.

Answer 2

Хорошо, я не знаю, если кто-то еще столкнется с подобной проблемой, но я опубликую здесь решение.

Хорошо, что у меня был рабочий образец для сравнения, строка за строкой. Проблема была связана с контейнером, который я использовал.

Все мое приложение было заключено в тег формы. (Я позаимствовал этот код из шаблона, в котором также использовалось много кнопок, но это была обычная JS. Это тоже обычная JS, но заключенная в node JS Express интерфейсное приложение).

Похоже, что приложение express js настроено, оно требует нажатия любой кнопки и использования ее для вызова API как способа отправки формы с введенными значениями.

Итак , Я заменил тег формы на тег div, и проблема решена. вызывается API.