【问题标题】:How to pass client-side parameters to the server-side in Angular/Node.js/Express如何在 Angular/Node.js/Express 中将客户端参数传递给服务器端
【发布时间】:2016-06-14 11:39:23
【问题描述】:

可能是一个非常基本的问题,但我似乎找不到简单的答案。

我有一个利用 Angular 的 $http 的 GET 方法,它从特定的 url (URL_OF_INTEREST) 请求一个承诺。

在这台服务器上,我运行一个快速脚本server.js 可以处理 GET 请求的脚本。

server.js

var express    = require('express');        // call express
var app        = express();                 // define our app using express
var bodyParser = require('body-parser');
var stripe     = require("stripe")("CUSTOM_TEST_TOKEN");

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

var port = process.env.PORT || 8080;        
var router = express.Router();              // get an instance of the express Router

router.get('/', function(req, res, next) {

    var stripeToken = "CUSTOM_PAYMENT_TOKEN";

    var charge = stripe.charges.create({
        amount: 1100, // amount in cents, again
        currency: "usd",
        source: stripeToken,
        description: "Example charge"
    }, function(err, charge) {
        if (err && err.type === 'StripeCardError') {
            res.json(err);   
        } else {
            res.json(charge);   
        }
    });
});

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

    next();
})

app.use('/api', router); // register our route
app.listen(port); // start our server
console.log('Magic happens on port ' + port);

我可以使用 Angular GET 方法与 URL_OF_INTEREST 通信,如下所示:

$http.get('URL_OF_INTEREST')
        .success(
            function(success){
                console.log(success)
            })
        .error(
            function(error){
                console.log(error)
            });

但是,金额、货币、来源和描述字段需要理想地从 Angular 客户端应用程序传递。

如何实现,我的 express 应用程序如何读取这些数据?

【问题讨论】:

    标签: javascript angularjs node.js express angularjs-http


    【解决方案1】:

    您需要在 get 调用中传递数据,如下所示:

    var data = {
        amount: 3,
        currency: 2,
        source: 3,
        description: 4
    };
    
    $http.get('URL_OF_INTEREST', data) // PASS THE DATA AS THE SECOND PARAMETER
        .success(
            function(success){
                console.log(success)
            })
        .error(
            function(error){
                console.log(error)
            });
    

    在你的后端,你可以得到你的 url 参数如下:

    router.get('/', function(req, res, next) {
    
        var amount = req.query.amount; // GET THE AMOUNT FROM THE GET REQUEST
    
        var stripeToken = "CUSTOM_PAYMENT_TOKEN";
    
        var charge = stripe.charges.create({
            amount: 1100, // amount in cents, again
            currency: "usd",
            source: stripeToken,
            description: "Example charge"
        }, function(err, charge) {
            if (err && err.type === 'StripeCardError') {
                res.json(err);   
            } else {
                res.json(charge);   
            }
        });
    });
    

    【讨论】:

    • 我刚刚编辑了答案。只需使用“req.query.amount”来获取您的数据。
    • 您可以调试您的“req.query”以查看来自您的客户端的内容。使用开发工具检查您的 ajax 调用,并查看查询字符串参数以确保您的数据正在发送。
    • 不,我总是得到 {} 的 req.query,但是在用 {param: {....}} 包装之后,我就能得到参数。
    【解决方案2】:

    HTTP GET方法

    客户:

    $http.get('/login', {params: {name: 'ABCXYZ'}})
        .success(
            function(success){
                console.log(success)
            })
        .error(
            function(error){
                console.log(error)
            });
    

    服务器

    router.get('/login', function(req, res, next) {
        var username = req.query.name;
        res.json({'status': 200, 'msg': 'success'});
    }
    

    HTTP POST 方法

    客户:

    $http.post('/login', {params: {name: 'ABCXYZ'}})
        .success(
            function(success){
                console.log(success)
            })
        .error(
            function(error){
                console.log(error)
            });
    

    服务器

    router.post('/login', function(req, res, next) {
        var username = req.body.params.name;
        res.json({'status': 200, 'msg': 'success'});
    }
    

    【讨论】:

      【解决方案3】:

      答案与好的解决方案

      • 向服务器发送数据时首选 HTTP POST

      • HTTP GET 方法意味着查询数据,而不是发送数据。因此,带有 GET 方法的 HTTP 请求的 request.body 将始终为空。但是仍然可以使用查询字符串通过 GET 将数据发送到服务器。在你的情况下:

      客户

      $http.get('url_to_be_hit', { name : 'Mr. X'})
          .success(function(res){ //response })
          .error(function(err){ //failure });
      

      服务器

      app.get('/url_to_be_hit', function(req,res,next){
         //req.query.name
      }); 
      

      乐于助人!

      【讨论】:

      • 哇.. req.query 而不是 req.bodyreq.params。找了这么久,终于解决了我的问题!谢谢!
      【解决方案4】:

      你可以用你的参数创建一个 JS 对象,然后使用 jQuery 的$.param (http://api.jquery.com/jquery.param/) 轻松将它们序列化为 URL 查询字符串:

      var parameters = {
         amount: 123,
         description: 'test'
      };
      

      在您的$http 电话中:

      $http.get('URL_OF_INTEREST'+'?'+$.param(parameters))
              .success(
                  function(success){
                      console.log(success)
                  })
              .error(
                  function(error){
                      console.log(error)
                  });
      

      编辑或者如果你不想使用 jQuery:

      $http.get('URL_OF_INTEREST', { params: parameters })
              .success(
                  function(success){
                      console.log(success)
                  })
              .error(
                  function(error){
                      console.log(error)
                  });
      

      在服务器端,只需使用req 对象获取参数:

      var amount = req.query.amount;
      var description = req.query.description;
      

      【讨论】:

      • 你是对的。但这是解决问题的一种方法,而且行之有效。
      猜你喜欢
      • 2016-06-17
      • 1970-01-01
      • 2016-11-28
      • 1970-01-01
      • 2013-01-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多