js koa2 利用cookie传参 跳转页面

最近在用 get 传参的时候遇到一个问题,不想用 form 提交参数的时候( form 传参会在url后面生成 ?a=1 这种小尾巴),怎么在 get 请求中传参?

cookie 传参

调用js,把需要传给下一个路由的值存为 cookie ,再在下一个路由进行获取。(若需要传递多个参数,建议还是用 form 进行传参。实在不想用 form 也可以,将多个参数存为一个 cookie 字符串就好了,获取的时候再拆开)
好了,直接上 demo 吧。

demo
const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
const bodyParser = require('koa-bodyparser');

app.use(bodyParser());
app.use(router.routes());

router.get('/',async ctx => {
  ctx.body = `
              <div>
                  <label>邮箱:</label>
                  <input type="email" id="email" placeholder="请输入邮箱">
              </div>
              <div>
                  <label>密码:</label>
                  <input type="password" placeholder="密码">
              </div>
              <input type="button" name="" value="登录" onclick="set()">
  <script>
  function set() {
    var cvalue = document.getElementById('email').value; //获取输入的 email
    document.cookie = cvalue; //直接将输入的 email 设置为cookie
    window.location.href='/welcome' //页面跳转
}
</script>
  `
});

router.get('/welcome',async ctx => {
    let cookie = ctx.request.header.cookie; //从get请求头中获取cookie
    ctx.body = `
          <h1>welcome</h1>
          <p>${cookie}</p>
    `});

app.listen(3000)

下面再给一个传统的 form 传参的 demo

const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
const bodyParser = require('koa-bodyparser');

app.use(bodyParser());
app.use(router.routes());

router.get('/',async ctx => {
  ctx.body = `
  <form action="/welcome" method="get">
    <div>
      <label>用户名:</label>
      <input type="text" name="name" placeholder="请输入用户名">
    </div>

    <div>
      <label>邮箱:</label>
      <input type="email" name="email" placeholder="请输入邮箱">
    </div>

    <div>
      <label>密码:</label>
      <input type="password" name="password" placeholder="密码">
    </div>
    <input type="submit" value="登录">
  </form>
  `
});

router.get('/welcome',async ctx => {
    let txt = ctx.request.query;
    console.log(txt)
    let name = txt.name;
    let email = txt.email;
    let password = txt.password;
    ctx.body = `
          <h1>用户名:</h1>
          <p>${name}</p>
          <h1>邮箱:</h1>
          <p>${email}</p>
          <h1>密码:</h1>
          <p>${password}</p>
    `});

app.listen(3000)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值