如何使用节点的方法覆盖包和 ajax 来覆盖要放置的方法?



我是Web开发的新手,所以请原谅以下情况是否不清楚...如果需要任何澄清...我也是Stackoverflow的新手,所以尝试让我轻松:p

我的问题是,如何将Node的" Method-Override"软件包与Ajax一起使用?我需要覆盖帖子方法,并将其设置为一个PUT方法...用于用户注册和学校作业的登录表格...该文档不是很有帮助,因为它没有显示如何使用Ajax使用方法 - 跨越的示例...另外,可能并不重要...但是我正在使用非关系数据库来存储用户信息(mongodb)...我也在使用Node的" cookie-session"软件包,但是出于这个问题的目的,我会省略cookie-session的东西...

到目前为止,在我的用户路线中,我有:

const express = require('express');
const userRoutes = express.Router();
const bodyParser = require('body-parser');
const methodOverride = require('method-override');
userRoutes.use(methodOverride('_method'));
userRoutes.put('/', (req, res) => {
  // ... user registration logic here
})
userRoutes.post('/', (req, res) => {
  // ... user login logic here
})


对于我的客户端,我有:

$(() => {
  let $registrationInfo = $('.registration form');
  let $loginInfo = $('.login form');
  $.ajax({
      method: POST,
      url: '/users',
      data: $registrationInfo.serialize();
      -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --HELP!!!
    })
    .then((new_user) => {
      // ... client side user registration logic here
      console.log('new user created');
    })
  $.ajax({
      method: POST,
      url: '/users',
      data: $loginInfo.serialize();
    })
    .then((user_login) => {
      // ... client side user login logic here
      console.log('user has logged in');
    })
})


对于我的html,我有:

<div class="registration">
  <form method="POST" action="/users/">
    <ol>
      <li>
        <label for="username">Username:</label>
        <input type="text" name="username" />
      </li>
      <li>
        <label for="password">Password:</label>
        <input type="password" name="password" />
      </li>
      <li>
        <label for="confirm-password">Confirm Password:</label>
        <input type="password" name="confirm-password" />
      </li>
      <li>
        <input type="submit" class="register" name="register" value="Register" />
      </li>
    </ol>
  </form>
</div>
<div class="login">
  <form method="POST" action="/users/">
    <ol>
      <li>
        <label for="username">Username:</label>
        <input type="text" name="username" />
      </li>
      <li>
        <label for="password">Password:</label>
        <input type="password" name="password" />
      </li>
      <li>
        <input type="submit" class="login" name="login" value="Login" />
      </li>
    </ol>
  </form>
</div>

不确定如何实现" _method" ...请帮助!

感谢Adv。

编辑:P.S。我们必须将上述中间件用于此项目,并且应该使用尽可能少的HTML ...

,如方法 - 跨架软件包文档中所述

使用查询字符串值覆盖该方法,请指定查询 字符串键作为字符串参数到MethodOverride函数。到 然后打电话,将邮政请求发送给URL,并被覆盖 方法作为该查询字符串键的值。这种使用 查询值通常与普通HTML一起使用 试图支持传统浏览器时的元素,但仍在使用 较新的方法。

您已将查询字符串指定为_method,因此,如果要覆盖HTTP方法,以将查询sting _method=PUT包含。

<form method="POST" action="/users?_method=PUT">
 ...
</form>

要解析服务器端上的表单,您应该在用户路由上使用身体份子。

userRoutes.use(bodyParser.urlencoded({ extended: false }));

最新更新