FFIVE
2022-08-27 13:55:22
我遇到了一個(gè)問題,我使用異步向本地JSON服務(wù)器發(fā)出HTTP put請(qǐng)求,await,這工作正常,只是當(dāng)put請(qǐng)求完成時(shí),頁面基本上是刷新的,我不想要,我似乎可以停止它。我嘗試過使用e.preventDefault(),但它似乎不起作用。我有一個(gè)基本的HTML頁面,我的HTML頁面中的大多數(shù)元素都是使用javascript動(dòng)態(tài)提供的。我的目標(biāo)是調(diào)用我的http.put請(qǐng)求的保存連接按鈕,這工作正常,然后我使用getAllConnections()和ui.showConnections(connectionsAvailable)提供以前的數(shù)據(jù),這會(huì)閃爍一秒鐘,然后立即放置請(qǐng)求發(fā)送響應(yīng),我得到導(dǎo)航到 localhost:5500/index.html?#。如何阻止導(dǎo)航到 的發(fā)生?我的 http 庫位于一個(gè)單獨(dú)的 js 文件中:網(wǎng)址.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; }應(yīng)用程序.js//Save connection changesfunction 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() }
3 回答
德瑪西亞99
TA貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
您的按鈕是一個(gè)按鈕。提交按鈕的行為是提交表單 - 這正是正在發(fā)生的事情。submit
只需將按鈕更改為普通按鈕即可。沒有必要將其作為提交。
婷婷同學(xué)_
TA貢獻(xiàn)1844條經(jīng)驗(yàn) 獲得超8個(gè)贊
您正在提交表單元素。
如果要繼續(xù)使用該事件,請(qǐng)刪除標(biāo)記,然后使按鈕 。click<form>type="button"
如果要繼續(xù)使用標(biāo)記,則必須偵聽窗體上的事件,并在該事件上使用。submitev.preventDefault()
胡子哥哥
TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超6個(gè)贊
只需放在處理程序的末尾:return falseclick
editConnection.addEventListener('click', function (e) {
....
return false;
}
添加回答
舉報(bào)
0/150
提交
取消
