执行HTTP.put请求后停止“导航至”

Question

我遇到一个问题，我使用async向本地JSON服务器发出HTTP放置请求，等待，这很好，只是在放置请求完成后，页面基本上刷新了我不想要的，我可以似乎阻止了它。我尝试使用e.preventDefault（），但似乎无法正常工作。我有一个基本的HTML页面，并且HTML页面中的大多数元素都是使用javascript动态提供的。我将目标指向调用我的http.put请求的保存连接按钮，此方法工作正常，然后使用getAllConnections（）和ui.showConnections（connectionsAvailable）处理先前的数据，该消息闪烁一秒钟，然后立即发出放置请求发送响应，然后导航到localhost：5500 / index.html？＃。如何停止导航到发生？

我的http库位于单独的js文件中：

http.js

     async put(url, data) {

       const response = await fetch(url, {
               method: 'PUT',
               headers: {
                   'Content-type': 'application/json'
               },
               body: JSON.stringify(data)
           });
           const resdData = await response.json();
           return resdData;
    }

app.js

//Save connection changes
function saveConnection() {

   // Update connection with PUT
    http.put(`http://localhost:3000/connections/${selectedConnection.id}`, selectedConnection)
        .then(data => {
            getAllConnections()
            ui.showConnections(connectionsAvailable)})

        .catch(err => console.log(err))  
}


    //function to display check info entered in edit connection
    editConnection.addEventListener('click', function (e) {
        function hasClass(elem, className) {
            return elem.className.split(' ').indexOf(className) > -1;
        }
        //check connection name is characters between 2 and 25 long
        if (hasClass(e.target, 'data')) {
            console.log(data)
            validateName()
            e.preventDefault()
        } else if (hasClass(e.target, 'cancel')) {
            getAllConnections()
            ui.showConnections(connectionsAvailable)

            e.preventDefault()
        } 
        //overwrite tank information
        else if (hasClass(e.target,`save-connection`)){
            let connectionNewName = document.querySelector('.connection-name').value;
            let connectionNewIpAddress = document.querySelector('.ipAddress').value;
            let connectionNewPort = document.querySelector('.port').value;

            assignselectedConnection(selectedConnection.id, connectionNewName, connectionNewIpAddress, connectionNewPort)

            saveConnection()

            e.preventDefault()
        }   

我定位的正在提供数据/保存连接的按钮

editConnection(connectionName, connectionIpAddress, connectionPort) {
      const params = document.getElementById('data');
      const connectionData = `
      <div class="container">
      <div class="card mb-3 mt-3">
        <div class="card">
          <h5 class="card-header text-left">
            Enter Connection Data:
          </h5>
          <div class="card-body">
            <form>
              <div class="form-group text-left">
                <label for="connection-name">Please enter a Connection Name:</label>
                <input type="text" class="connection-name form-control " id="connection-name" placeholder="${connectionName}">
                <div class="invalid-feedback"> Name must be between 2 and 25 characters
                </div>
              </div>
              <div class="form-group text-left">
                <label for="ipAddress">Please enter an IP Address:</label>
                <input type="text" class="ipAddress form-control" id="ipAddress" placeholder="${connectionIpAddress}">
                <div class="invalid-feedback"> Please enter a valid IP Address in the format 192.168.200.100
                </div>
              </div>
              <div class="form-group text-left">
                <label for="port">Please enter a Port:</label>
                <input type="number" class="port form-control" id="port" placeholder="${connectionPort}">
                <div class="invalid-feedback"> Please enter a valid 4 figure port number eg 8080
                </div>
              </div>

            <div class="form">
              <div class="form-group">
                <div class="form-row">
                  <div class="col">
                    <button href="#" [![enter image description here][1]][1]type="button" class="save-connection btn btn-warning btn-lg btn-block">Save Connection</button>
                  </div>
                  <div class="col">
                    <button href="#" type="button" class="cancel btn btn-dark btn-lg btn-block">Cancel</button>
                  </div>
                </div>
              </div>
            </div>
            </form>
          </div>
        </div>
      </div>

Answer 1

您的按钮是submit按钮。提交按钮的行为是提交表单-这正是正在发生的情况。

只需将您的按钮更改为普通按钮即可。无需提交。

Answer 2

您正在提交表单元素。

如果要继续使用click事件，请删除<form>标签，并将按钮设为type="button"。

如果要继续使用标签，则必须在表单上侦听submit事件，并在该事件上使用ev.preventDefault()。