Chrome ajax 執(zhí)行后, 會再執(zhí)行一次獲取 login.html 的操作. Firefox ajax 直接就不觸發(fā),這段代碼哪里出現(xiàn)了問題?
<!DOCTYPE?html><html>??<head>????<meta?charset="utf-8"?/>????<title>Document</title>????<script?src="jquery.min.js"></script>??</head>??<body>????<form>??????用戶名:?<input?type="text"?id="username"?/><br?/>??????密碼:?<input?type="password"?id="password"?/><br?/>??????<button?id="login">登錄</button>??????<button?id="reg">注冊</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:?"用戶名不存在"????????????})??????????);????????}?else?if?(user[username]?!=?password)?{??????????res.end(????????????JSON.stringify({??????????????err:?2,??????????????msg:?"密碼錯誤"????????????})??????????);????????}?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:?"賬戶已經(jīng)存在"????????????})??????????);????????}?else?{??????????res.end(????????????JSON.stringify({??????????????err:?0,??????????????msg:?"注冊成功"????????????})??????????);????????}??????}?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這時候是正常的
然后輸入賬戶密碼, 點擊登錄, chrome 會出現(xiàn)登錄成功或者登錄失敗的提示框,這時候也是正常的。
問題在于點擊這個提示框的確定之后,發(fā)生的事情稍微有一點詭異,就是login.html會自動重新請求加載一次,然后地址欄網(wǎng)址變?yōu)閘ocalhost:8080/login.html?, 多出來一個問號。
我看老師演示的時候并不是這樣的,我的代碼是哪里出現(xiàn)了問題呢,找了半天也沒找到。
我的問題:
為什么 chrome 在執(zhí)行完 ajax 后會重新加載一次 login.html 呢?
然后地址欄為什么會多出個 ? 呢?
火狐為啥和Chrome表現(xiàn)的不一致呢?(沒執(zhí)行ajax里的GET請求,重新加載完也沒多出一個 ?號)
我懷疑是我 js 哪里寫的有點問題,但是真的看不出來啊...
2020-03-11
自己先來簡單回答一下:
首先火狐不能執(zhí)行 ajax 里 GET 請求的問題, 把 ajax 改成同步請求以后就和 chrome 表現(xiàn)一致了.
然后就是點一下按鈕就會加載 login.html 的問題, 在我把 html 中的 js 代碼全部去掉,? js 文件精簡成下面這樣后, 點擊按鈕仍然會自動調(diào)用 (res, req) => { } 那個回調(diào)函數(shù),估計本來就是這樣. 把 <button> 換成 <input type = "button"> 就好了, 估計老師中途發(fā)現(xiàn) <button> 有問題悄悄地換掉了...