exprees中的请求

GET请求

GET请求识别参数实际上就是解析URL地址的参数

目录结构

 

 index.html文件

<!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>
    <h1>public中的index.html</h1>
    <p>
        <input type="button" id="btn1" value="按我发送GET请求">
      </p>
      <p>
        <input type="button" id="btn2" value="按我发送POST请求">
      </p>
</body>
<script src="./jquery.min.js"></script>
<script>
    $("#btn1").click(function(){
        $.get("/get_data",{
            "name":"小明",
            "id":"1"
        },function(data){
            console.log(data)
        })
    })
</script>
</html>

app.js文件

var express=require("express")
var url=require("url")
var app=express()
app.use(express.static("public"))
app.get("/get_data",function(req,res){
    console.log(req.url)
  })
app.listen(3000,function(){
    console.log("监听3000端口")
})

此时我们就得到了请求的url

 

 我们这里使用url模块

var express=require("express")
var url=require("url")
var app=express()
app.use(express.static("public"))
app.get("/get_data",function(req,res){
    var query=url.parse(req.url,true).query;
    console.log(query)
  })
app.listen(3000,function(){
    console.log("监听3000端口")
})

 

 此时我们就可以得到数据

url.parse方法是用来处理url请求参数的

req.url表示的是当前url地址的参数

true表示的是对url的解析结果,如果为true解析结果的query就是一个JSON数据,否则就是url的字符串参数

 

POST请求

POST请求参数是携带在上行报文上的,所以我们不能使用url模块再去处理了

此时我们可以借助npm模块帮我们处理

安装依赖npm install --save formidable

index.html

<!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>
    <h1>public中的index.html</h1>
    <p>
        <input type="button" id="btn1" value="按我发送GET请求">
      </p>
      <p>
        <input type="button" id="btn2" value="按我发送POST请求">
      </p>
   
</body>
<script src="./jquery.min.js"></script>
<script>
    $("#btn2").click(function(){
      $.post("/sub_data",{
        "name":"小明",
        "age": 18,
        "sex": ""
      },function(data){
        if(data.result == "success") {
          alert("信息录入成功")
        }
      })
    })
</script>
</html>

app.js

var express=require("express")
var formidable=require("formidable")
var app=express()
app.use(express.static("public"))
  app.post("/sub_data",function(req,res){
    // formidable对象内部有个IncomingForm方法,一旦被new调用后会返回表单处理工具的实例
    var form = new formidable.IncomingForm();
    // err是错误信息,fields表示的是数据源,files表示的是文件源
    form.parse(req,function(err,fields,files){
      res.json({"result":"success"})
    })
  })
app.listen(3000,function(){
    console.log("监听3000端口")
})

 

 

总结一下GET和POST请的处理参数的方法

  •   GET请求是利用NodeJS的内置url模块去处理的,使用url.parse()方法
  •  POST请求是利用npm 的formidable模块去处理的,通过IncomingForm()方法进行实例化产生表单处理工具的实例

其他方式的请求

express处理请求一共有二十多种,除了我们常见的GET和POST请求之外,还有其他的请求需要处理参数,其实除了GET请求外,所以的请求处理信息都可以用formidable去处理,方法和POST请求也是一样的

index.html

<!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>
    <h1>public中的index.html</h1>
      <p>
        <input type="button" id="btn3" value="按我发送DELETE请求">
      </p>
</body>
<script src="./jquery.min.js"></script>
<script>
   $("#btn3").click(function(){
      $.ajax({
        "url": "del_data",
        "type": "DELETE",
        "data":{
          "id": "10002"
        },
        "success":function(data){
          alert(data)
        }
      })
    })
  
</script>
</html>

app.js

var express=require("express")
var formidable=require("formidable")
var app=express()
app.use(express.static("public"))
  app.delete("/del_data",function(req,res){
    // formidable对象内部有个IncomingForm方法,一旦被new调用后会返回表单处理工具的实例
    var form = new formidable.IncomingForm();
    // err是错误信息,fields表示的是数据源,files表示的是文件源
    form.parse(req,function(err,fields,files){
      res.send("学号为"+fields.id+"学生信息删除成功!");
    })
  })
app.listen(3000,function(){
    console.log("监听3000端口")
})

 

posted @ 2021-10-19 10:47  keyeking  阅读(58)  评论(0编辑  收藏  举报