Почему моя функция поиска JavaScript перенаправляет на "http://localhost:8090/?"?

Question

Я создаю веб-сервер, который в данный момент размещается на http://localhost:8090.. Он состоит из файла HTML, server.js и файла client.js. Мне удалось настроить связь между клиентом и сервером идеально для моих нужд. Моя проблема заключается в том, что когда я нажимаю на кнопку поиска, все работает нормально, за исключением того, что по какой-то причине она перенаправляет страницу на «http://localhost:8090/?', когда мне нужно, чтобы она оставалась на» http://localhost:8090/', чтобы она динамически обновлять HTML.

Я много искал и не нашел ничего похожего на мою проблему. Я нашел этот один вопрос https://stackoverflow.com/a/2647601/5264986, но он будет вызывать диалоговое окно каждый раз, когда страница захочет перейти по другому адресу, а это не то, что мне нужно. Я прошел через весь мой код, и нет никакого перенаправления или ссылки, указывающих на это местоположение. Я сузил это до этой функции в client.js:

function search(){

    var search = document.getElementById('txt_field').value; 

    fetch('/search', {
        headers: {text: search}
    })
        .then(response => response.json())
        .then(function(data) {

            // CODE HERE TO DYNAMICALLY UPDATE HTML

        })
        .catch(error => console.error(error));

}

и на моем сервере все, что происходит для этого:

app.get('/search', function(req, res){

    var text = req.get('text');
    var url = 'https://api.spotify.com/v1/search?q=name:'+text+'&type=track';
    var content = httpGet(url);
    res.send(content);

});

где httpGet - xmlhttprequest.

Редактировать

Это HTML-код для кнопки поиска:

<button id="send_btn" class="btn btn-outline-secondary my-2 my-sm-0"><img src="./images/search.png" width="30"></button>

и в client.js это то, что вызывает его:

document.getElementById('send_btn').onclick = search;

Конец редактирования

Он отправляет содержимое обратно клиенту, но по какой-то причине он перенаправляет на: 8090 /? который перезагружает HTML-файл и перезаписывает динамический HTML. Любые указатели в правильном направлении будут с благодарностью.

Answer 1

Добавьте preventDefault в ваш обработчик событий.Я предполагаю, что функция search вызывается при нажатии на кнопку.Если это так, то вам нужно передать событие, как показано ниже:

function search(evt){
  evt.preventDefault(); // <--
  var search = document.getElementById('txt_field').value; 

  fetch('/search', {
    headers: {text: search}
  })
    .then(response => response.json())
    .then(function(data) {

      // CODE HERE TO DYNAMICALLY UPDATE HTML

     })
     .catch(error => console.error(error));
}

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

Итак, preventDefault позволяетбраузер знает, что вы не хотите, чтобы он отправлял форму, что предотвращает перенаправление.