Node Express实现GET和POST请求以及模拟JSONP请求

最新推荐文章于 2025-05-23 18:33:29 发布

原创最新推荐文章于 2025-05-23 18:33:29 发布 · 725 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #js #html

node 专栏收录该内容

1 篇文章

订阅专栏

本文通过实例代码介绍了如何在Node.js中利用Express框架处理GET和POST请求，同时讲解了模拟JSONP请求的方法，适用于前后端交互场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码

1、js部分



const express = require('express');
const app = express();
const circularJson = require('circular-json');

// 设置端口号
const port = 3001

function UserError(message) {
  this.message = message || '默认信息';
  this.name = 'UserError';
}

const customRes = [{name:1},{name:2},{name:11},{name:22},{name:111},{name:222}];

// 配置中间件 除了错误级别的中间件，其他的中间件，必须在路由之前进行配置
// express.json()中间件，解析表单中的 JSON 格式的数据
// app.use(express.json());

// express.urlencoded()中间件，解析表单中的 url-encoded 格式的数据
app.use(express.urlencoded());

//路由配置

// 处理jsonp
app.get("/jsonpGet",(req,res,next)=>{
    // get请求的请求体data 从 req.query 提取

   //1.获取客户端get请求发送过来的回调函数的名字
   let fnName = req.query.callback;
   //2.得到要通过JSONP形式发送给客户端的数据
   const data = {name:'tom'}
   //3.根据前两步得到的数据，拼接出个函数调用的字符串,需要转成json字符串
   let result = `${fnName}(${circularJson.stringify(data)})`
   //4.把上步拼接得到的字符串，响应给客户端的<script> 标签进行解析执行，status设置相应的状态码
   res.status(200).send(result);
   // 让请求继续向下执行
   next();
})

// 普通get请求
app.get("/commonGet",(req,res,next)=>{
    // get请求的请求体data 从 req.query 提取

   //1.获取客户端发送过来的请求体data 
   const body = req.query;
   //2.调用res.send方法，向客户端响应结果,status设置相应的状态码
   res.status(200).send({name:"tom"});
   // 让请求继续向下执行
   next();
})

// post请求
app.post("/commonPost", (req, res,next) => {
  // post请求的请求体data 从 req.body 提取

  // express.urlencoded()获取请求体中req.body包含的url-encoded格式的数据
  // 如果不配置解析表单数据中间件express.urlencoded()，则req.body默认等于undefined
  // 通过 req.body,来接收客户端发送过来的请求体数据
  const body = req.body;
  // 调用res.send方法，向客户端响应结果，status设置相应的状态码
  res.status(500).send({
      status: 0,
      msg: 'POST请求成功！',
      data: circularJson.parse(circularJson.stringify(customRes))
  })
  // 让请求继续向下执行
  next();
});

// 模拟抛错拦截操作，配合app.use使用
app.post("/testError",(req, res,next) => {
  throw new UserError(
    {
      code:50001,
      msg:'程序发生了未知错误'
    }
  )
})

// 中间件捕获error,返回到responseJSON和responseText中
app.use((err, req, res, next) => {
  res.status(500).send(err.message);
})

app.listen(port, () => {
   console.log(`Example app listening on port ${port}`)
})

[点击并拖拽以移动]

2、html部分

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-06-14 13:33:44
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-06-28 13:56:30
 * @FilePath: \node\1.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * 关联1.js文件
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="btn">点击发送请求</button>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script>

    function getJsonpData(response) {
        console.log("获取数据成功")
        console.log(response);
    }
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        //创建script标签
        var script = document.createElement("script");
        script.src = 'http://localhost:3001/jsonpGet?callback=getJsonpData';
        document.body.appendChild(script);
        script.onload = function () {
          document.body.removeChild(script)
        }
    }

    $.ajax({
        //请求方式
        type:'POST',
        //发送请求的地址
        url:'http://localhost:3001/commonPost',
        //服务器返回的数据类型
        dataType:'json',
        //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
        data:{
          name:'post请求',
          type:'post',
          list:JSON.stringify({name:1,age:1})
        },
        success:function(res){
            //请求成功函数内容
          console.log(res)
        },
        error:function(jqXHR){
            //请求失败函数内容
            console.log(jqXHR,222);
        }
    });

    $.ajax({
      //请求方式
      type:'GET',
      //发送请求的地址以及传输的数据
      url:'http://localhost:3001/commonGet',
      //服务器返回的数据类型
      dataType:'json',
      data:{
        name:'get请求',
        type:'get',
        list:JSON.stringify({name:2,age:2})
      },
      success:function(res){
          //请求成功函数内容
          console.log(res)
      },
      error:function(jqXHR){
          //请求失败函数内容
          console.log(jqXHR,111);
      }
    });


    $.ajax({
        //请求方式
        type:'POST',
        //发送请求的地址
        url:'http://localhost:3001/testError',
        //服务器返回的数据类型
        dataType:'json',
        //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
        data:{
          name:'post请求',
          type:'post',
          list:JSON.stringify({name:1,age:1})
        },
        success:function(res){
            //请求成功函数内容
          console.log(res)
        },
        error:function(jqXHR){
            //请求失败函数内容
            console.log(jqXHR,222);
        }
    });
  </script>
</body>
</html>