关于Ajax请求的两种方式 GET和POST （以登录验证为例）

最新推荐文章于 2024-04-22 19:29:39 发布

生风

最新推荐文章于 2024-04-22 19:29:39 发布

阅读量1.7k

点赞数 1

分类专栏： js 文章标签： ajax 服务器前端

本文链接：https://blog.csdn.net/weixin_45685108/article/details/122381898

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

众所周知，Ajax是用来链接前后端的数据，进行前后端数据交互的的一种方式。

其特点就是局部刷新技术，顾名思义，就是当网页的部分内容需要进行数据验证，在验证后需要局部刷新时，就不需要在重新加载整个页面。这种方法的一个好处就是可以节省资源，提高效率。

那么Ajax的请求方式有两种，一种是GET，另一种则是POST

两种方式的主要区别是：

GET方式提交的数据，数据附加在地址栏中，比如你在页面里输入了用户名和密码，那么这两个数据就会追加在地址栏中发送给后端进行验证。

假设我的端口号是8080的情况下，运行本地服务器。前端代码如下：

<body>
    <div class="box">
        <div>
            用户名：<input type="text" id="username">
        </div>
        <div>
            密码：<input type="password" id="userpwd">
        </div>
        <button id="login">登录</button>
    </div>
    <script src="../js/login.js"></script>
    
</body>

在我输入用户名为：qweqwe、密码为：123123后
提交给后端的网址中就会是一下形式
http://localhost:8080:/login.html?username=qweqwe&userpwd=123123

 后端使用Ajax发送数据就会是以下形式：

document.getElementById('login').onclick = function () {
    let username = document.getElementById('username').value
    let userpwd = document.getElementById('userpwd').value
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.status == 200 && xhr.readyState == 4) {
           // 此处编写当Ajax成功发送请求后需要执行的代码
        }
    }

    xhr.open("GET",`http://localhost:8045/login?username=${username}&userpwd=${userpwd}`,true)
    xhr.send()
}

 后端简易验证数据的形式就会是：

const urlObj = URL.parse(req.url) //获取上面代码片段中xhr.open()方法发过来的地址 如：http://localhost:8080:/login?username=qweqwe&userpwd=123123
const pathname = urlObj.pathname; //获取除去域名和协议以及参数之后的内容 如：/login
const query = queryString.parse(urlObj.query); // 获取传的参数，如：{“username”:“qweqwe" ,"userpwd" = "123123"}
if (pathname == '/login' && req.method == "GET") {
    fs.readFile("./data/user.json", "utf-8", (err, file) => {  // “./data/user.json”为模拟的数据库，以json的格式存储在data文件夹中
        if (err) {
            res.end('1') // 如果出错错，返回错误代码
        }
        const arr = JSON.parse(file);  // 将./data/user.json文件读取成JSON的格式，存储在arr中
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].username == query.username) {
                res.end("123456") // 用户名已存在如果出错错，返回用户名已存在的错误代码
                return;
            }
        }

        arr.push(query) // 如果用户名不存在，将获取的query对象添加到arr数组中
        const arrString = JSON.stringify(arr) // 再将arr数组转换成字符串的形式
        fs.writeFile('./data/user.json', arrString, (err) => {  // 将字符串形式的数组写入模拟数据库中
            if (err) {
                res.end("1") // 未知错误
            }
            res.end("2") // 返回注册成功代码
        })
    })

POST提交方式则不会将数据添加到地址栏中，而是附加在响应头中。
一般来说用户登录的数据不会显示在地址栏中，所以用POST方法

后端使用Ajax发送数据就会是以下形式：

<body>
    <div class="box">
        <div>
            用户名：<input type="text" id="username">
        </div>
        <div>
            密码：<input type="password" id="userpwd">
        </div>
        <button id="login">登录</button>
    </div>
    <script src="../js/login.js"></script>
    
</body>

 后端简易验证数据的形式就会是：

document.getElementById('login').onclick = function () {
    let username = document.getElementById('username').value
    let userpwd = document.getElementById('userpwd').value
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.status == 200 && xhr.readyState == 4) {
            // 此处编写当Ajax成功发送请求后需要执行的代码
        }
    }

    xhr.open("POST",`http://localhost:8080/login`,true)
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") // 设置请求头
    xhr.send(`username=${username}&userpwd=${userpwd}`)
}

 后端简易验证数据的形式就会是：

if (pathname == '/login' && req.method == "POST") {
      let body = '';
      req.on('data', chunk => {
          body += chunk.toString('utf-8')
      })
      req.on('end', () => {
          body = queryString.parse(body)
          fs.readFile('./data/user.json', "utf-8", (err, file) => {
              if (err) {
                  res.end('0') // 未知错误
              }
              const arr = JSON.parse(file)
              for (let i = 0; i < arr.length; i++) {
                  if (arr[i].username == body.username) {
                      if (arr[i].userpwd == body.userpwd) {
                          res.end("2") //登录成功
                          return;
                      } else {
                          res.end("3") //密码错误
                          return
                      }
                  }
              }
              res.end('4') // 用户名不存在
          })
      })
  }

生风

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
关于Ajax请求的两种方式 GET和POST （以登录验证为例）

众所周知，Ajax是用来链接前后端的数据，进行前后端数据交互的的一种方式。其特点就是局部刷新技术，顾名思义，就是当网页的部分内容需要进行数据验证，在验证后需要局部刷新时，就不需要在重新加载整个页面。这种方法的一个好处就是可以节省资源，提高效率。那么Ajax的请求方式有两种，一种是GET，另一种则是POST两种方式的主要区别是：GET方式提交的数据，数据附加在地址栏中，比如你在页面里输入了用户名和密码，那么这两个数据就会追加在地址栏中发送给后端进行验证。假设我的端口号是8080的情况下，运行本
复制链接

扫一扫