Reactjs post form data using ajax

I have used promises with swagger code generator code here as main one. You can find ajax calling in comment section as well. It worked like a charm..

var React = require(“react”);

var Promise = require(‘bluebird’);
var Store = require(“../stores/Payment.store”);
var Action = require(“../actions/Payment.Action”);
var result = {
“firstName”: ”,
“lastName”: ”,
“cardnum”: ”,
“cvv”:”
};

var mainRes,data;
var Payment = React.createClass({
statics: {
api: function (ctx, attrs) {
if (ctx.req.params) {
this.apiProps.apiParams = extendParams(ctx.req.params, this.apiProps.apiParams);
}
return ComponentAction.getProduct(ctx, this.apiProps);
},
store: function () {
return Store;
},
apiProps: {
apiEndPoint: ‘getCardData’,
apiParams: {}

}
},

getInitialState: function () {
return {pricedata: Store.getCart(),mainRes:result}
//{data: Store.getCart()}

},
handleSubmit: function(e) {

e.preventDefault();

var firstName = this.state.firstName;
var lastName = this.state.lastName;
var cardnum = this.state.cardnum;
var cvv = this.state.cvv;
var jsonFormat;
if(!firstName || !cardnum) return;

// this.setState({
// firstName: ”,
// lastName: ”,
// cardnum: ”,
// cvv:”
// });
// body:JSON.stringify({
// id: “8”,
// first_name: firstName,
// last_name: lastName,
// number:cardnum,
// cvv2 : cvv,
// })
// I’m adding a callback to the form submit handler, so you can
// keep all the state changes in the component.
jsonFormat = {
headers:{
‘content-type’: ‘application/json’
},
data:{
id: “8”,
first_name: firstName,
last_name: lastName,
number:cardnum,
cvv2 : cvv,
}
}
this.constructor.apiProps.apiParams = jsonFormat.data;
Action.getCardData({appConfig: this.props.ctx},this.constructor.apiProps).then(function (res) {
console.log(res);
if(res.response.statusCode == 200){
alert(“Thanks for your payment”);
//this.transitionTo(“/test”);
}
},function(err){
console.log(err);
});

// first_name: firstName,
// last_name: lastName,
// number:cardnum,
// cvv2 : cvv,
// this.onFormSubmit({
// first_name: firstName,
// last_name: lastName,
// number:cardnum,
// cvv2 : cvv,
// url: “http://localhost:3000/api/cards/”
// }, function(data) {
// //this.setState({ message: data });

// console.log(data);
// postdata(data);

// });

// function postdata(data){
// jsonFormat= data;
// }
// this.constructor.apiProps.apiParams = jsonFormat;
},
changeFName: function(e) {
this.setState({
firstName: e.target.value
});
},

changeLName: function(e) {
this.setState({
lastName: e.target.value
});
},
changeCard: function(e) {
this.setState({
cardnum: e.target.value
});
},
changeCvv: function(e) {
this.setState({
cvv: e.target.value
});
},
// onFormSubmit: function(data, callback){

// $.ajax({
// url: data.url,
// dataType: ‘json’,
// type: ‘PUT’,
// data: data,
// success: callback,
// error: function(xhr, status, err) {

// //console.error(this.props.url, status, err.toString());

// }.bind(this)
// });
// },

render: function () {

return(

Welcome to Mini-Basket Payment Page.
Total Price: {this.state.pricedata.totalPrice}
Please complete your payment by filling your card details.

First Name
Last Name
Card Number
CVV

</form >
</div>
);
}
});

//
module.exports = Payment;

HTTP Proxy – node.js

What is HTTP Proxy basically?

In computer networks, a proxy server is a server (a computer system or an application) that acts as an intermediary for requests from clients seeking resources from other servers. A client connects to the proxy server, requesting some service, such as a file, connection, web page, or other resource available from a different server and the proxy server evaluates the request as a way to simplify and control its complexity. Proxies were invented to add structure and encapsulation to distributed systems.

Also called/used as “HTTP Proxy is basically a webaddress you type in to your companies proxy server so you can access the internet.”

What does it do?

Proxy server advantages include:

  • Maintaining identity anonymity as a security precaution.
  • Content control
  • Accelerating caching rates.
  • Facilitating access to prohibited sites.
  • Enforcing access policies on certain websites.
  • Allowing a site to make external server requests.
  • Avoiding security controls.
  • Bypassing Internet filtering for access to prohibited content.

So what it does in nodejs?

An HTTP proxy with custom routing logic that conditionally forwards to different ports based upon the requested host and path name.

Install http-proxy and url:

$ npm install http-proxy url

Then define the proxy as a node.js instance (we’ll name the file proxy-server.js):

var httpProxy = require("http-proxy");
var url = require("url");

httpProxy.createServer(function(req, res, proxy) {

  var hostname = req.headers.host.split(":")[0];
  var pathname = url.parse(req.url).pathname;

  // Options for the outgoing proxy request.
  var options = { host: hostname };

  // Routing logic
  if(hostname == "127.0.0.1") {
    options.port = 8083;
  } else if(pathname == "/upload") {
    options.port = 8082;
    options.path = "/"; 
  } else {
    options.port = 8081;
  }
  // (add more conditional blocks here)

  proxy.proxyRequest(req, res, options);

}).listen(8080);

console.log("Proxy listening on port 8080");

All incoming requests on port 8080 will be received by the proxy and considered by the routing logic. The url module is used to parse and extract thepathname, which is tested along with the hostname to determine the forwarding target.

Requests with 127.0.0.1 as the host name will be forwarded to localhost:8083. Requests that do not have 127.0.0.1 as the host but have the path/upload are forwarded to localhost:8082. Any other request will be forwarded the port localhost:8083.

You can add this to the bottom of proxy-server.js:

var http = require("http");

http.createServer(function(req, res) {
  res.end("Request received on 8081");
}).listen(8081);

http.createServer(function(req, res) {
  res.end("Request received on 8082");
}).listen(8082);

http.createServer(function(req, res) {
  res.end("Request received on 8083");
}).listen(8083);

Start the proxy by running in the terminal:

$ node proxy-server.js
Proxy listening on port 8080

Now assert the routing works as expected using your browser.

This should forward to the server listening on port 8081:

Request received on 8081

The /upload path will forward to 8082:

Request received on 8082

Entering 127.0.0.1 as the host name forwards to 8083:

Request received on 8083