web-dev-qa-db-fra.com

Comment passer des paramètres côté client au côté serveur dans Angular/Node.js/Express

Probablement une question très fondamentale, mais je n'arrive pas à trouver une réponse simple. 

J'ai une méthode GET exploitant le $http d'Angular qui demande une promesse à une URL particulière (URL_OF_INTEREST).

Sur ce serveur, j'exécute un script express script server.js qui peut gérer les demandes 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);

Je peux communiquer avec l'URL_OF_INTEREST en utilisant une méthode GET Angular comme suit:

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

Cependant, le nombre de champs, la devise, la source et la description doivent idéalement être transmis depuis l'application côté client Angular.

Comment cela peut-il être réalisé et comment mon application express peut-elle lire ces données?

javascriptangularjsnode.jsexpressangularjs-http
6
JohnAndrews

Vous devez transmettre les données dans votre appel get comme suit:

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)
        });

Et dans votre backend, vous pouvez obtenir vos paramètres d'URL comme suit:

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);   
        }
    });
});
5
Bruno João

HTTPGETméthode

Client:  

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

Serveur :

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

HTTPPOSTméthode

Client:  

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

Serveur :

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

Réponse vs bonne solution

  • HTTPPOSTest préférable lors de l'envoi de données au serveur.

  • La méthode HTTP GET consiste à interroger des données et non à les envoyer. Pour cette raison, une requête HTTP avecGETméthode aura toujours request.body vide. Néanmoins, les données peuvent toujours être envoyées au serveur via GET à l'aide d'une chaîne de requête. Dans ton cas:

Client 

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

Serveur 

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

Heureux d'aider!

3
Zeeshan Hassan Memon

Vous pouvez créer un objet JS avec vos paramètres, puis utiliser le $.param de jQuery ( http://api.jquery.com/jquery.param/ ) pour les sérialiser facilement dans une chaîne de requête d'URL:

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

Et sur votre appel $http:

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

ÉDITE: OR si vous ne voulez pas utiliser jQuery:

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

Sur le serveur, utilisez simplement l'objet req pour obtenir les paramètres:

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