我有一个简单表单的html页面。此页面作为我的应用程序的'/'索引加载。
使用此脚本：
$(document).ready(function(e){
$('#auth').on('submit',function(){
getValues();
});
});
我调用一个获取输入值的外部文件，并且有一个任务是在另一条路线'/ login'上向我的服务器发出一个帖子请求。
function getValues()
{
var values= {};
values.username = $("input[name='username']").val();
values.password = $("input[name='password']").val();
console.log(values);
$.ajax({
type: "POST",
data :JSON.stringify(values),
url: "/login",
contentType: "application/json"
});
}
API登录路线：
app.get('/login', function(req, res){
console.log("sent on request: ", req.body);
if(req.body)
{ res.redirect('/me');}
});
我的问题是没有调用登录页面。 我无法在控制台上看到req.body的输出。
如何发送从表单收集的数据并将其发送到另一个将api重定向到第三条路径的api路由？
编辑：
var send = $.post( "/login", values, function(data) {
console.log( "1 success", data );
})
.done(function() {
console.log( "2 success", data );
})
.fail(function(send, status, errorThrown) {
console.log( "send ", send, "status ", status, "Thrown ", errorThrown );
//send returns the listed object below
//status returns only 'error'
});
该调用返回失败 - console.log（错误）;
第二次编辑： 这就是失败的原因：
Object { readyState: 0,
getResponseHeader: getResponseHeader(),
getAllResponseHeaders: getAllResponseHeaders(),
setRequestHeader: setRequestHeader(),
overrideMimeType: overrideMimeType(),
statusCode: statusCode(),
abort: abort(),
state: state(),
always: always(),
catch: catch(), … }
答案 0 :(得分：1)
试试这个
<强>的login.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
</head>
<body>
<form id="auth">
username <input type="text" name="username" value="admin">
password <input type="text" name="password" value="12345">
<input type="submit" value="Login">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#auth').submit(function(e){
e.preventDefault();
var formdata = $(this).serializeArray();
var btn = $(this).find('input[type="submit"]');
var btnVal = btn.val();
$.ajax({
type: "POST",
data : formdata,
url: "/login",
dataType: 'json',
beforeSend: function(){
btn.prop('disabled', true).val('Loading');
},
success: function(data){
if(data.ok ==1){
btn.val('Success');
console.log('success');
window.location = '/welcome'; //redirect somewhere if success
}else{
btn.val('Failed');
console.log('failed');
console.log(data.msg);
}
setTimeout(function(){
btn.prop('disabled', false).val(btnVal);
},2000);
},
error: function(data){
console.log('error');
console.log(data.responseText);
btn.val('Error');
setTimeout(function(){
btn.prop('disabled', false).val(btnVal);
},2000);
}
});
});
});
</script>
</body>
</html>
<强> index.js
var express = require('express'); //npm install express
var app = express();
var path = require('path');
var bodyParser = require('body-parser'); //npm install body-parser
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname + '/login.html'));
});
app.post('/login', function(req, res){
console.log(req.body);
var result = {'ok':0};
if(req.body.username == 'admin' && req.body.password =='12345'){
result.ok = 1;
}else{
result.msg = 'wrong username/password';
}
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify(result));
});
app.get('/welcome', function(req, res) {
res.sendFile(path.join(__dirname + '/welcome.html'));
});
app.listen(8000);
<强> welcome.html
welcome<br>
<a href="/">back to login</a>
在cmd中运行之后：node index.js
然后打开浏览器：http://localhost:8000
第一个问题。如何使用jquery ajax捕获成功和错误？
回答：查看login.html并找到success和error
标准：
如果服务器使用HTTP代码标头200进行响应，则此响应将返回success回调。否则将在error
有时，服务器结果错误，但仍然将其作为HTTP 200发送。对于黑客这个，我使用dataType: 'json'。这意味着，添加了success回调的返回条件。 1.具有HTTP 200,2。必须是json格式。否则转到error回调。
，您将看到var result = {'ok': 0}这是服务器响应为json的默认值。如果用户通过匹配。如果不匹配则更改result.ok = 1，仍然保持result.ok = 0并提供额外的论证（result.msg）。在这里我在这种情况下使用wrong username/password：客户端login.html将捕获此响应success回调但会触发failed因为result.ok = 0（不是1）。最后，如果服务器由于某种原因抛出错误，这个响应将永远不会以json格式（如错误异常blabla行号xxxx）。不是json格式的所有东西都会被login.html中的error回调捕获。在error中，我从不使用console.log（数据），而是使用console.log（data.responseText），因为data会有如屏幕截图中的那么多对象，而最有用的只是数据.responseText将提供人类可读的错误消息
最后一部分是我们需要使用text/html将响应标头从默认application/json更改为res.setHeader('Content-Type', 'application/json');（hei client，im json not html）然后我们转换{{ 1}}使用var result
第二个问题。如何使用jquery ajax和nodejs从
res.send(JSON.stringify(result));发送数据？
回答：我们需要模块<FROM>和express
以json（javascript对象或数组）
发送body-parser和data: JSON.stringify()发送它，就像你所做的一样。contentType: "application/json"和express（您必须先安装它）。然后我们需要使用body-parser能够以json格式解析请求（客户端发送的）。要使用它，我们只需编写此代码：bodyParser.json()然后您可以使用app.use(bodyParser.json());来获取POST请求req.body.username + data: JSON.stringify() + contentType: "application/json" 将其作为url-encoded
发送app.use(bodyParser.json())或serializeArray()来获取serialize()标记中的所有内容。在您的示例中，您需要将每个输入名称捕获到<form>。如果有10个输入怎么办？在将其发送到服务器之前，您需要捕获每个输入名称。因此，我们将var values更改为data: JSON.stringify() data: $('#auth').serializeArray() contentType: "application/json"中，我们仍然需要index.js和expres。不同的是，我们使用body-parser代替app.use(bodyParser.urlencoded({ extended: false }));来解析urlencoded。但你可以留下两者存在。因为也许你想把它作为urlencoded / json发送。app.use(bodyParser.json()); + data: $('#auth').serializeArray() 第3个问题。如何将数据发送到第3条路线
实际上我不知道你对此的意思。因为你需要更多指明问题。但也许这个例子可以解释
修改 index.js
app.use(bodyParser.urlencoded({ extended: false }));<强> other.js
...
function test(name){
console.log('my name is '+name);
}
app.post('/login', function(req, res){
var result = {'ok':0};
if(req.body.username == 'admin' && req.body.password =='12345'){
result.ok = 1;
}else{
result.msg = 'wrong username/password';
}
test(req.body.username); //send to another function
var foo = require("./other"); //include another file (other.js)
var nameLength = foo.other(req.body.username); //run function other() from file other.js
console.log(nameLength);
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify(result));
});
...
答案 1 :(得分：0)
处理POST请求时，请使用app.post，而不是app.get：
app.post('/login', function(req, res){