为了账号安全,请及时绑定邮箱和手机立即绑定

Chrome ajax 执行后, 会再执行一次获取 login.html 的操作. Firefox ajax 直接就不触发,这段代码哪里出现了问题?

<!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: "账户已经存在"            })          );        } 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);

目录结构:

www

    jquery.min.js

    login.html

index.js


地址栏输入: localhost:8080/login.html这时候是正常的

然后输入账户密码, 点击登录, chrome 会出现登录成功或者登录失败的提示框,这时候也是正常的。

问题在于点击这个提示框的确定之后,发生的事情稍微有一点诡异,就是login.html会自动重新请求加载一次,然后地址栏网址变为localhost:8080/login.html?, 多出来一个问号。

我看老师演示的时候并不是这样的,我的代码是哪里出现了问题呢,找了半天也没找到。


我的问题:

  1. 为什么 chrome 在执行完 ajax 后会重新加载一次 login.html 呢?

  2. 然后地址栏为什么会多出个 ? 呢?

  3. 火狐为啥和Chrome表现的不一致呢?(没执行ajax里的GET请求,重新加载完也没多出一个 ?号)


我怀疑是我 js 哪里写的有点问题,但是真的看不出来啊...

正在回答

1 回答

自己先来简单回答一下:

首先火狐不能执行 ajax 里 GET 请求的问题, 把 ajax 改成同步请求以后就和 chrome 表现一致了.

然后就是点一下按钮就会加载 login.html 的问题, 在我把 html 中的 js 代码全部去掉,  js 文件精简成下面这样后, 点击按钮仍然会自动调用 (res, req) => { } 那个回调函数,估计本来就是这样. 把 <button> 换成 <input type = "button"> 就好了, 估计老师中途发现 <button> 有问题悄悄地换掉了...

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);


0 回复 有任何疑惑可以回复我~
#1

_路人丙 提问者

额,找到真正的原因了,是因为我把 <button> 写在 <form> 里了...而老师的并没有...
2020-03-11 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

Chrome ajax 执行后, 会再执行一次获取 login.html 的操作. Firefox ajax 直接就不触发,这段代码哪里出现了问题?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信