利用promise及参数解构封装ajax请求

最新推荐文章于 2021-10-23 21:01:55 发布

Sylvia_2000

最新推荐文章于 2021-10-23 21:01:55 发布

阅读量292

点赞数 1

分类专栏：前端 JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/ciel_2/article/details/112278929

版权

前端同时被 3 个专栏收录

29 篇文章 2 订阅

订阅专栏

2020

18 篇文章 0 订阅

订阅专栏

JavaScript

18 篇文章 2 订阅

订阅专栏

本文展示了如何使用前端Ajax与后端Express进行数据交互。前端通过Ajax发送GET和POST请求，调用localhost:3000的接口获取数据或提交用户信息。后端Express设置路由，分别处理主页产品列表、详情页和用户登录接口，返回JSON数据或验证用户登录。

摘要由CSDN通过智能技术生成

文章目录

1.前端代码
2.后端代码
- - - 1) 创建一个后端项目
    - 2) 在routes下创建index.js,users.js，代码如下
3.注：

1.前端代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /**
     * type: get/post
     * url: http://localhost:3000  http://localhost:3000/details  http://localhost:3000/users
     * data: lid=5 / uname=lili&upwd=123456
     * dataType: '' / 'json', 如果服务端返回的是json格式字符串，就通过dataType通知ajax函数自动转换为对象
     * **/
    ajax({
      type: 'get',
      url: 'http://localhost:3000',
      dataType: 'json'
    })
    // data 不写在解构时值默认为 data: undefined
    ajax({
      type: 'get',
      url: 'http://localhost:3000/details',
      data: 'lid=0',
      dataType: 'json'
    })
    ajax({
      type: 'post', 
      url: 'http://localhost:3000/users', 
      data: 'uname=lili&upwd=123456',
    }).then(function(res){
      alert(res)
    })
    // dataType 不写在解构时值默认为 dataType: undefined

    function ajax({type, url,data, dataType}){
      return new Promise(function(open){
        var xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function(){
          if(xhr.readyState === 4 && xhr.status === 200){
            if(dataType === 'json'){
              var res = JSON.parse(xhr.responseText)
            }else{
              var res = xhr.responseText
            }
            console.log(res)
            open(res)
          }
        }

        if(type === 'get' && data !== undefined){
          url += `?${data}`
        }
        xhr.open(type, url, true)
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

        if(type === 'get'){
          xhr.send()
        }else{
          xhr.send(data)
        }
      })
    }
  </script>
</body>
</html>

另：ajax实际代码实现如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function(){
      if(xhr.readyState === 4 && xhr.status === 200){
        console.log(xhr.responseText)
      }
    }
    xhr.open('get', 'http://localhost:3000', true)
    xhr.send()
  </script>
</body>
</html>

2.后端代码

1) 创建一个后端项目

在这里插入图片描述

2) 在routes下创建index.js,users.js，代码如下

// index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
var products = [
  {
    lid:1,
    pname:'笔记本',
    price:3400
  },
  {
    lid:2,
    pname:'手机',
    price:5400
  },
  {
    lid:3,
    pname:'iPad',
    price:6400
  }
]

router.get('/', function(req, res, next) {
  res.send(products)
});

router.get('/details', function(req, res, next){
  var lid = req.query.lid
  res.send(products[lid])
})

module.exports = router;

// user.js
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.post('/', function(req, res, next) {
  var uname = req.body.uname
  var upwd = req.body.upwd
  if(uname === 'lili' && upwd === '123456'){
    res.send('登陆成功')
  }else{
    res.send({
      code: 0,
      message: '用户名或密码错误'
    })
  }
});

module.exports = router;

3.注：

为避免跨域，可将前端代码和后端同时放在一个项目内，使用同一地址，再发送请求调取接口

Sylvia_2000

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
利用promise及参数解构封装ajax请求

文章目录1.前端代码2.后端1.前端代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
复制链接

扫一扫

专栏目录