我有一个简单形式的html页面。此页面作为我的应用程序的'/'索引加载。
用这个脚本：
$(document).ready(function(e){
$('#auth').on('submit',function(){
getValues();
});
});
我调用一个外部文件来获取输入的值，并且任务是在另一条路由'/ login'上向我的服务器发送一个post请求。
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(), … }
试试这个
的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
标准：
success回调。否则将返回errordataType: '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会在屏幕截图中有这么多对象，最有用的只有data.responseText会给出人类可读的错误信息text/html将响应头从默认的application/json更改为res.setHeader('Content-Type', 'application/json');（hei client，im json not html）然后我们使用var result将res.send(JSON.stringify(result));从js对象转换为json格式第二个问题。如何使用jquery ajax和nodejs从
<FROM>发送数据？
回答：我们需要模块express和body-parser
data: JSON.stringify()和contentType: "application/json"发送它，就像你所做的一样。
在index.js中我们需要加载模块express和body-parser（你必须先安装它）。然后我们需要使用bodyParser.json()能够以json格式解析请求（客户端发送的）。要使用它，我们只需编写此代码：app.use(bodyParser.json());然后您可以使用req.body.username获取POST请求
结论要求：data: JSON.stringify() + contentType: "application/json" + app.use(bodyParser.json())serializeArray()或serialize()来获取<form>标签中的所有内容。在您的示例中，您需要将每个输入名称捕获到var values。如果有10个输入怎么办？在将其发送到服务器之前，您需要捕获每个输入名称。所以我们将data: JSON.stringify()改为data: $('#auth').serializeArray()
因为请求发送为字符串。所以我们删除contentType: "application/json"
在index.js，我们仍然需要expres和body-parser。不同的是我们使用app.use(bodyParser.urlencoded({ extended: false }));而不是app.use(bodyParser.json());来解析urlencoded。但你可以留下两者存在。因为也许你想把它作为urlencoded / json发送。
结论要求：data: $('#auth').serializeArray() + app.use(bodyParser.urlencoded({ extended: false }));第三个问题。如何将数据发送到第3条路线
实际上我不知道你对此的意思。因为你需要更多指定问题。但也许这个例子可以解释这一点
修改了index.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));
});
...
other.js
function other(name) {
console.log("console.log from other.js");
return name.length;
}
exports.other = other;
处理POST请求时，请使用app.post，而不是app.get：
app.post('/login', function(req, res){