2017-02-26 46 views
1

我是网络开发新手,如果以下内容可能不清楚,请原谅我...如果需要澄清,请告诉我...我也是新手,因此请尽量轻松使用:P如何使用节点的方法重写包与Ajax重写方法放?

我的问题是,如何使用节点的“方法覆盖”与Ajax包? 我需要重写POST方法并将其设置为PUT方法...用于用户注册和学校作业的登录表单... 该文档不是非常有用,因为它没有显示如何使用方法 - 用ajax覆盖... 另外,可能不是那么重要...但我使用非关系数据库来存储用户信息(mongodb)...我也使用节点的“cookie会话”包,但为这个问题的目的,我会忽略Cookie的会话东西...

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

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="https://stackoverflow.com/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="https://stackoverflow.com/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”...请帮忙!

感谢您的帮助!

编辑:P.S.我们需要使用上述中间件这个项目,都应该使用尽可能少的HTML作为可能的...

回答

0

正如方法重写的包documentation

使用查询字符串值描述要覆盖该方法,请将查询 字符串键指定为methodOverride函数的字符串参数。至 然后拨打电话,发送一个POST请求到一个包含重写的 方法的URL作为该查询字符串键的值。当尝试支持传统浏览器但仍使用 新方法时,此方法使用 查询值通常会与纯HTML元素结合使用。

您指定的查询字符串作为_method,所以如果你想重写HTTP方法把你包括查询刺痛_method=PUT

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

要解析服务器端的表单,您应该在用户路由上使用body-parser。

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