如何发送从表单收集的数据并将其发送到另一个api路由? JQuery,Node.Js API

时间:2018-03-01 15:02:22

标签: jquery node.js api

我有一个简单表单的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(), … }

2 个答案:

答案 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并找到successerror

标准:

  1. 如果服务器使用HTTP代码标头200进行响应,则此响应将返回success回调。否则将在error

  2. 上返回
  3. 有时,服务器结果错误,但仍然将其作为HTTP 200发送。对于黑客这个,我使用dataType: 'json'。这意味着,添加了success回调的返回条件。 1.具有HTTP 200,2。必须是json格式。否则转到error回调。

  4. 在index.js中
  5. ,您将看到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将提供人类可读的错误消息

  6. 最后一部分是我们需要使用text/html将响应标头从默认application/json更改为res.setHeader('Content-Type', 'application/json');(hei client,im json not html)然后我们转换{{ 1}}使用var result

  7. 从js对象到json格式
      

    第二个问题。如何使用jquery ajax和nodejs从res.send(JSON.stringify(result));发送数据?

    回答:我们需要模块<FROM>express

    1. 以json(javascript对象或数组)

      发送
      • 在login.html中,我们需要构建对象/数组并使用:body-parserdata: JSON.stringify()发送它,就像你所做的一样。
      • 在index.js中
      • 我们需要加载模块contentType: "application/json"express(您必须先安装它)。然后我们需要使用body-parser能够以json格式解析请求(客户端发送的)。要使用它,我们只需编写此代码:bodyParser.json()然后您可以使用app.use(bodyParser.json());来获取POST请求
      • 结论要求:req.body.username + data: JSON.stringify() + contentType: "application/json"
    2. 将其作为url-encoded

      发送
      • 以urlencoded方式发送是以字符串形式发送请求。我们可以使用app.use(bodyParser.json())serializeArray()来获取serialize()标记中的所有内容。在您的示例中,您需要将每个输入名称捕获到<form>。如果有10个输入怎么办?在将其发送到服务器之前,您需要捕获每个输入名称。因此,我们将var values更改为data: JSON.stringify()
      • 因为请求以字符串形式发送。所以我们删除了data: $('#auth').serializeArray()
      • contentType: "application/json"中,我们仍然需要index.jsexpres。不同的是,我们使用body-parser代替app.use(bodyParser.urlencoded({ extended: false }));来解析urlencoded。但你可以留下两者存在。因为也许你想把它作为urlencoded / json发送。
      • 结论要求:app.use(bodyParser.json()); + data: $('#auth').serializeArray()
    3.   

      第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){