Chrome ajax 執(zhí)行后, 會(huì)再執(zhí)行一次獲取 login.html 的操作. Firefox ajax 直接就不觸發(fā)，這段代碼哪里出現(xiàn)了問(wèn)題?
<!DOCTYPE?html><html>??<head>????<meta?charset="utf-8"?/>????<title>Document</title>????<script?src="jquery.min.js"></script>??</head>??<body>????<form>??????用戶(hù)名:?<input?type="text"?id="username"?/><br?/>??????密碼:?<input?type="password"?id="password"?/><br?/>??????<button?id="login">登錄</button>??????<button?id="reg">注冊(cè)</button>????</form>????<script>??????var?username?=?$("#username").val();??????var?password?=?$("#password").val();??????$("#login").click(function()?{????????$.ajax({??????????url:?"/login",??????????data:?{????????????username:?$("#username").val(),????????????password:?$("#password").val()??????????},??????????dataType:?"json",??????????success(res)?{????????????if?(res.err)?{??????????????alert(res.msg);????????????}?else?{??????????????alert("登錄成功");????????????}??????????}????????});??????});????</script>??</body></html>const?http?=?require("http");const?url?=?require("url");const?querystring?=?require("querystring");const?fs?=?require("fs");let?user?=?{??admin:?123456};http??.createServer((req,?res)?=>?{????let?path,?get,?post;????if?(req.method?==?"GET")?{??????let?{?pathname,?query?}?=?url.parse(req.url,?true);??????path?=?pathname;??????get?=?query;????}?else?if?(req.method?==?"POST")?{??????let?arr?=?[];??????req.on("data",?buffer?=>?{????????arr.push(buffer);??????});??????req.on("end",?()?=>?{????????post?=?querystring.parse(Buffer.concat(arr).toString());??????});????}????complete();????function?complete()?{??????if?(path?==?"/login")?{????????res.writeHead(200,?{??????????"Content-Type":?"text/plain;charset=utf-8"????????});????????let?{?username,?password?}?=?get;????????if?(!user[username])?{??????????res.end(????????????JSON.stringify({??????????????err:?1,??????????????msg:?"用戶(hù)名不存在"????????????})??????????);????????}?else?if?(user[username]?!=?password)?{??????????res.end(????????????JSON.stringify({??????????????err:?2,??????????????msg:?"密碼錯(cuò)誤"????????????})??????????);????????}?else?{??????????res.end(????????????JSON.stringify({??????????????err:?0,??????????????msg:?"登錄成功"????????????})??????????);????????}??????}?else?if?(path?==?"/reg")?{????????res.writeHead(200,?{??????????"Content-Type":?"text/plain;charset=utf-8"????????});????????let?{?username,?password?}?=?post;????????if?(user[username])?{??????????res.end(????????????JSON.stringify({??????????????err:?1,??????????????msg:?"賬戶(hù)已經(jīng)存在"????????????})??????????);????????}?else?{??????????res.end(????????????JSON.stringify({??????????????err:?0,??????????????msg:?"注冊(cè)成功"????????????})??????????);????????}??????}?else?{????????fs.readFile(`www${path}`,?(err,?data)?=>?{??????????if?(err)?{????????????res.end("404?not?found");??????????}?else?{????????????res.end(data);??????????}????????});??????}????}??})??.listen(8080);目錄結(jié)構(gòu):
www
????jquery.min.js
??? login.html
index.js
地址欄輸入: localhost:8080/login.html這時(shí)候是正常的
然后輸入賬戶(hù)密碼, 點(diǎn)擊登錄, chrome 會(huì)出現(xiàn)登錄成功或者登錄失敗的提示框，這時(shí)候也是正常的。
問(wèn)題在于點(diǎn)擊這個(gè)提示框的確定之后，發(fā)生的事情稍微有一點(diǎn)詭異，就是login.html會(huì)自動(dòng)重新請(qǐng)求加載一次,然后地址欄網(wǎng)址變?yōu)閘ocalhost:8080/login.html?, 多出來(lái)一個(gè)問(wèn)號(hào)。
我看老師演示的時(shí)候并不是這樣的，我的代碼是哪里出現(xiàn)了問(wèn)題呢，找了半天也沒(méi)找到。
我的問(wèn)題：
為什么 chrome 在執(zhí)行完 ajax 后會(huì)重新加載一次 login.html 呢？
然后地址欄為什么會(huì)多出個(gè) ？ 呢？
火狐為啥和Chrome表現(xiàn)的不一致呢？（沒(méi)執(zhí)行ajax里的GET請(qǐng)求，重新加載完也沒(méi)多出一個(gè) ？號(hào)）
我懷疑是我 js 哪里寫(xiě)的有點(diǎn)問(wèn)題，但是真的看不出來(lái)啊...
2020-03-11
自己先來(lái)簡(jiǎn)單回答一下：
首先火狐不能執(zhí)行 ajax 里 GET 請(qǐng)求的問(wèn)題, 把 ajax 改成同步請(qǐng)求以后就和 chrome 表現(xiàn)一致了.
然后就是點(diǎn)一下按鈕就會(huì)加載 login.html 的問(wèn)題, 在我把 html 中的 js 代碼全部去掉,? js 文件精簡(jiǎn)成下面這樣后, 點(diǎn)擊按鈕仍然會(huì)自動(dòng)調(diào)用 (res, req) => { } 那個(gè)回調(diào)函數(shù)，估計(jì)本來(lái)就是這樣. 把 <button> 換成 <input type = "button"> 就好了, 估計(jì)老師中途發(fā)現(xiàn) <button> 有問(wèn)題悄悄地?fù)Q掉了...
http??.createServer((req,?res)?=>?{????let?path?=?"login.html";????fs.readFile(`www${path}`,?(err,?data)?=>?{??????if?(err)?{????????res.end("404?not?found");??????}?else?{????????res.end(data);??????}????});??})??.listen(8080);