nodejs接收post请求参数

最新推荐文章于 2023-05-21 14:25:17 发布

浅浅Chen

最新推荐文章于 2023-05-21 14:25:17 发布

阅读量744

点赞数

本文链接：https://blog.csdn.net/chenjingshen1214/article/details/78869115

版权

1.1-浏览器发送post请求参数的方式
1.2-服务端接收post请求参数的方式
post请求参数不直接在url路径中拼接，而是放在请求体中发送给服务器
- 请求三要素：请求行、请求头、请求体

1.1-浏览器发送post请求参数的方式

post请求参数不能直接在url路径中拼接，所以一般使用ajax请求来发送post请求参数
- 通常都是提交form表单数据使用post请求


<script>

  //浏览器中一般使用ajax来发送post请求
  $('#form').on('sunmit', function (e) {
    //禁用表单默认提交事件
    e.preventDefault();
    $.ajax({
      url: 'heroAdd',
      type: 'post',
      dataType: 'json',
      data: $(this).serialize(),
      success: function (data) {
      }
    });
  });
</script>

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

完整代码


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Hero - Admin</title>
  <!-- 导入jquery -->
  <script src="/node_modules/jquery/dist/jquery.js"></script>
  <!-- bootstrap布局 -->
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
  <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
  <style>
    .hero-list img {
      width: 50px;
    }
  </style>
</head>

<body>
  <header>
    <div class="page-header container">
      <h1>
        <a href="/">王者荣耀</a>
        <small>英雄管理器</small>
      </h1>
    </div>
  </header>
  <div class="container hero-list">
    <form id="form">
      <div class="form-group">
        <label for="exampleInputEmail1">英雄名称</label>
        <input type="text" name="name" class="form-control" id="exampleInputEmail1" placeholder="请输入英雄名称">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">英雄性别</label>
        <div class="radio">
          <label>
            <input type="radio" name="gender" id="optionsRadios1" value="男" checked>男
          </label>
          <label>
            <input type="radio" name="gender" id="optionsRadios1" value="女" checked>女
          </label>
        </div>
      </div>
      <div class="form-group">
        <label for="exampleInputFile">英雄图片</label>
        <!-- <input type="file" id="exampleInputFile"> -->
        <p class="help-block">请上传英雄图片.</p>
      </div>
      <button type="submit" class="btn btn-success">点击保存</button>
    </form>
  </div>
</body>

<script>
  //浏览器中一般使用ajax来发送post请求
  $('#form').on('sunmit', function (e) {
    //禁用表单默认提交事件
    e.preventDefault();
    $.ajax({
      url: 'heroAdd',
      type: 'post',
      dataType: 'json',
      data: $(this).serialize(),
      success: function (data) {
      }
    });
  });
</script>

</html>