- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我正在尝试构建一个将数据保存到数据库中的 React 应用程序。
我有以下类(class):
server.js
let express = require('express');
let bodyParser = require('body-parser');
let morgan = require('morgan');
let pg = require('pg');
let cors = require('cors');
const PORT = 3000;
let pool = new pg.Pool({
user: 'admin',
database: 'dev',
password: 'password',
host: 'localhost',
port: 5432,
max: 10
});
let app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(morgan ('dev'));
app.use(function(request, response, next) {
response.header("Access-Control-Allow-Origin", "*");
response.header("Access-Control-Allow-Headers", "Origin, X-Requested-
With, Content-Type, Accept, Authorization")
next();
});
app.get('/api/creditcards', function(request, response) {
pool.connect(function(err, db, done) {
if (err) {
return response.status(400).send(err);
} else {
db.query('SELECT * FROM creditcards', function(err, table) {
done();
if (err) {
response.status(400).send(err)
}else {
response.status(200).send(table.rows)
}
})
}
})
});
app.post('/api/new-card', function(request, response) {
var cardholder = request.body.cardholder;
var cardnumber = request.body.cardnumber;
var card_identifier = request.body.card_identifier;
var expiration = request.body.expiration;
var cvc = request.body.cvc;
let values = [cardholder, cardnumber, card_identifier, expiration, cvc];
pool.connect((err, db, done) => {
if(err) {
return response.status(400).send(err);
} else {
db.query('INSERT INTO creditcards (cardholder, cardnumber, card_identifier, expiration, cvc) VALUES ($1, $2, $3, $4, $5)', [cardholder, cardnumber, card_identifier, expiration, cvc] ,(err, table) => {
done();
if (err) {
return response.status(400).send(err)
} else {
console.log('DATA INSERTED');
response.status(201).send({message : 'Data inserted...'})
}
})
}
})
});
app.listen(PORT, () => console.log('Listening on port ' + PORT));
和SaveNewCard.js
import React from 'react';
import Modal from './Modal';
import Payment from 'payment';
import { Row, Col, FormGroup, ControlLabel, Button, Alert, Grid } from 'react-bootstrap';
class SaveNewCard extends React.Component {
constructor() {
super();
this.state = {
creditcards: [],
isLoading: false,
error: null,
}
}
componentDidMount() {
const { cardnumber, expiration, cvc } = this.refs;
Payment.formatCardNumber(cardnumber);
Payment.formatCardExpiry(expiration);
Payment.formatCardCVC(cvc);
console.log('Component has mounted')
var that = this;
fetch('http://localhost:3000/api/creditcards')
.then(response => {
console.log(response)
if (response.ok) {
return response.json();
} else {
throw new Error('Something went wrong ...');
}
})
.then(data => that.setState({ creditcards: data.creditcards, isLoading: false }))
.catch(error => this.setState({ error, isLoading: false }));
}
addCreditCard(event) {
var that = this;
event.preventDefault();
let card_data = {
cardholder : this.refs.cardholder.value,
cardnumber : this.refs.cardnumber.value,
card_identifier : (this.refs.cardnumber.value).substr(15),
expiration : this.refs.expiration.value,
cvc : this.refs.cvc.value
};
console.log('Ez itt: ' + JSON.stringify(card_data))
var request = new Request('http://localhost:3000/api/new-card', {
method: 'POST',
headers: new Headers({ 'Content-Type': 'application/json', }),
body: JSON.stringify(card_data)
});
let creditcards = that.state.creditcards;
creditcards.push(card_data);
that.setState({
creditcards : creditcards
})
console.log(creditcards)
fetch(request)
.then(response => {
console.log(request)
if (response.ok) {
return response.json();
} else {
throw new Error('Something went wrong ...');
}
})
.then(data => this.setState({ creditcards: data.creditcards }))
.catch(error => this.setState({ error }));
}
cardList() {
return (<ul className="credit-card-list clearfix">
<Alert fluid style={{ paddingLeft: 40}} bsStyle="warning">
<strong>Please consider that only the following credit cards can be accepted:</strong>
<li><i data-brand="visa" className="fa fa-cc-visa">VISA</i></li>
<li><i data-brand="amex" className="fa fa-cc-amex">AMEX</i></li>
<li><i data-brand="mastercard" className="fa fa-cc-mastercard">Master Card</i></li>
</Alert>
</ul>);
}
saveNewCardForm() {
let creditcards = this.state.creditcards;
return (
<div>
<form className="SaveNewCard" onSubmit={ this.handleSubmit } style={{ paddingLeft: 40, paddingRight: 600}}>
<Grid fluid style={{ paddingLeft: 60, paddingRight: 60}}>
<Row>
<Col xs={12}>
<FormGroup>
<ControlLabel>Cardholder Name</ControlLabel>
<input
onKeyUp= {this.setCardType}
className="form-control text-center"
type="text"
ref="cardholder"
placeholder="Your Name"
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col xs={ 12 }>
<FormGroup>
<ControlLabel>Card Number</ControlLabel>
<input
onKeyUp={ this.setCardType }
className="form-control text-center"
type="text"
ref="cardnumber"
placeholder="Card Number"
/>
</FormGroup>
</Col>
</Row>
</Grid>
<Grid fluid style={{ paddingLeft: 60, paddingRight: 60}}>
<Row >
<Col xs={ 6 } sm={ 5 }>
<FormGroup>
<ControlLabel>Expiration</ControlLabel>
<input
className="form-control text-center"
type="text"
ref="expiration"
placeholder="MM/YYYY"
/>
</FormGroup>
</Col>
<Col xs={ 6 } sm={ 4 } smOffset={ 3 }>
<FormGroup>
<ControlLabel>CVC</ControlLabel>
<input
className="form-control text-center"
type="text"
ref="cvc"
placeholder="CVC"
/>
</FormGroup>
</Col>
</Row>
</Grid>
<Button bsStyle="primary" onClick={this.addCreditCard.bind(this)}>Submit</Button>
<Button onClick={this.removeCreditCard.bind(this)}>Delete</Button>
</form>
<ul>
{creditcards.map((creditcards => <li>{creditcards.cardholder}</li>))}
</ul>
</div>);
}
render() {
return (<div className="CreditCard">
{ this.cardList() }
{ this.saveNewCardForm() }
</div>);
}
}
SaveNewCard.propTypes = {};
export default SaveNewCard;
但我收到以下 Bad Request 400 错误:
和:
据我了解,我的请求不包含插入的数据...我认为问题出在某处......:
我让将“card_data”内容写入控制台,它就在那里:
知道为什么我的输入数据是空值吗?
抱歉,这篇文章很长......
更新:
代码在这一行失败:
我用直接输入替换了“request.body.XY”变量,在这种情况下,数据库插入工作正常......这可能符合我的要求......
最佳答案
问题是您没有正确使用 fetch。做一个帖子请求你应该这样做:
const options = {
method: 'post',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: JSON.stringify(card_data)
}
fetch('http://localhost:3000/api/new-card', options)
.then(response => {
console.log(request)
if (response.ok) {
return response.json();
} else {
throw new Error('Something went wrong ...');
}
})
.then(data => this.setState({ creditcards: data.creditcards }))
.catch(error => this.setState({ error }));
关于javascript - ReactJS 和 Node——错误 400 错误请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49234707/
我正在尝试从该网站抓取历史天气数据: http://www.hko.gov.hk/cis/dailyExtract_uc.htm?y=2016&m=1 在阅读了 AJAX 调用后,我发现请求数据的正确
我有两个 postman 请求 x,y,它们命中了两个不同的休息 api X,Y 中的端点。 x 会给我一个身份验证 token ,这是发出 y 请求所必需的。如何在请求 y 中发出请求 x ?也就是
我使用请求库通过 API 与其他服务器进行通信。但现在我需要同时发送多个(10 个或更多)POST 请求,并且只有在所有响应都正确的情况下才能进一步前进。通常语法看起来有点像这样: var optio
背景:当用户单击按钮时,其类会在class1和class2之间切换,并且此数据是通过 AJAX 提交。为了确认此数据已保存,服务器使用 js 进行响应(更新按钮 HTML)。 问题:如果用户点击按钮的
我正在将 Node.js 中的请求库用于 Google 的文本转语音 API。我想打印出正在发送的请求,如 python example . 这是我的代码: const request = requi
我经常使用requests。最近我发现还有一个 requests2 和即将到来的 requests3 虽然有一个 page其中简要提到了 requests3 中的内容,我一直无法确定 requests
我正在尝试将图像发送到我的 API,然后从中获取结果。例如,我使用发送一个 bmp 图像文件 file = {"img": open("img.bmp)} r = requests.post(url,
我发现 Google Cloud 确保移出其物理环境的任何请求都经过强制加密,请参阅(虚拟机到虚拟机标题下的第 6 页)this link Azure(和 AWS)是否遵循类似的程序?如果有人能给我指
我有一个 ASP.NET MVC 应用程序,我正在尝试在 javascript 函数中使用 jQuery 来创建一系列操作。该函数由三部分组成。 我想做的是:如果满足某些条件,那么我想执行同步 jQu
我找不到如何执行 get http 请求,所以我希望你们能帮助我。 这个想法是从外部url(例如 https://api.twitter.com/1.1/search/tweets.json?q=tw
我的应用只需要使用“READ_SMS”权限。我的问题是,在 Android 6.0 上,当我需要使用新的权限系统时,它会要求用户“发送和查看短信”。 这是我的代码: ActivityCompat.re
我的前端代码: { this.searchInput = input; }}/> 搜索 // search method: const baseUrl = 'http://localho
我有一个由 AJAX 和 C# 应用程序使用的 WCF 服务, 我需要通过 HTTP 请求 header 发送一个参数。 在我的 AJAX 上,我添加了以下内容并且它有效: $.ajax({
我正在尝试了解如何使用 promises 编写代码。请检查我的代码。这样对吗? Node.js + 请求: request(url, function (error, response, body)
如果失败(除 HTTP 200 之外的任何响应代码),我需要重试发送 GWT RPC 请求。原因很复杂,所以我不会详细说明。到目前为止,我在同一个地方处理所有请求响应,如下所示: // We
当用户单击提交按钮时,我希望提交表单。然而,就在这种情况发生之前,我希望弹出一个窗口并让他们填写一些数据。一旦他们执行此操作并关闭该子窗口,我希望发出 POST 请求。 这可能吗?如果可能的话如何?我
像 Facebook 这样的网站使用“延迟”加载 js。当你必须考虑到我有一台服务器,流量很大时。 我很感兴趣 - 哪一个更好? 当我一次执行更多 HTTP 请求时 - 页面加载速度较慢(由于限制(一
Servlet 容器是否创建 ServletRequest 和 Response 对象或 Http 对象?如果是ServletRequest,谁在调用服务方法之前将其转换为HttpServletReq
这是维基百科文章的摘录: In contrast to the GET request method where only a URL and headers are sent to the serv
我有一个循环,每次循环时都会发出 HTTP post 请求。 for(let i = 1; i console.log("succes at " + i), error => con
我是一名优秀的程序员,十分优秀!