如何使用reactjs在FORM Submit中做POST,并将对象值传递给REST服务
How to do POST in FORM Submit using reactjs and pass the object value into REST service?
我使用reactjs创建了一个登录页面,当我通过post方法rest api调用发送我的用户输入/密码来进行身份验证时,我收到了一个错误。有人能帮我看看这里出了什么问题吗? !
我猜这是因为我无法以json格式发送用户名和密码字符串。
错误,
<br />
<b>Notice</b>: Undefined variable: error in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>27</b><br />
<br />
<b>Notice</b>: Undefined variable: id in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>29</b><br />
<br />
<b>Notice</b>: Undefined variable: error in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>29</b><br />
{"code":"INVALID_JSON_INPUT","message":"Error decoding JSON input"}
这是我的app.js文件,
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
export default class App extends Component {
render() {
return (
<div className="App">
<div className="App-header"></div>
<form
id="main-login"
action="http://don.healthedata.com/admin/login"
method="post">
<h2>
Admin UI Login
</h2>
<label>
<span class="text">user:</span>
<input type="email" name="email"/><br/>
</label>
<br/>
<label>
<span class="text">password:</span>
<input type="password" name="password"/><br/>
</label><br/>
<div class="align-right">
<button type="submit">Submit</button>
</div>
</form>
</div>
);
}
}
解决方案:
修改后的App.js文件:
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
export default class App extends Component {
constructor(props, context) {
super(props, context);
this.state = { description: '' };
}
onChange(e) {
this.setState({
[e.target.name]: e.target.value
});
}
onSubmit(e) {
e.preventDefault();
fetch(this.props.formAction, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({description: this.state.description})
});
this.setState({description: ''});
}
render() {
return (
<div className="App">
<form
id="main-login"
action={this.props.action}
method={this.props.method}
onSubmit={this.onSubmit}>
<h2>Admin UI Login</h2>
<label>
<span class="text">user:</span>
<input type="email" name="email"/><br/>
</label>
<br/>
<label>
<span class="text">password:</span>
<input type="password" name="password"/><br/>
</label>
<br/>
<div class="align-right">
<button>Submit</button>
</div>
</form>
</div>
);
}
}
// App.propTypes = { action: React.PropTypes.string.isRequired, method: React.PropTypes.string}
App.defaultProps = {
action: 'http://don.healthedata.com/admin/login',
method: 'post'
};
module.exports = App;
当我提供用户输入/密码并点击提交时,什么都没有发生。
首先获取你想要插入数据的url。这里首先创建todoadd.js文件:
import fetch from 'isomorphic-fetch';
export function createBlogPost(data) {
return fetch('Your Rest url', {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
}
}).then(response => {
if (response.status >= 200 && response.status < 300) {
return response;
console.log(response);
window.location.reload();
} else {
console.log('Somthing happened wrong');
}
}).catch(err => err);
}
你的UI提交到tododialog .js:
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { createBlogPost } from '../../actions/todoadd';
import { addTodo } from '../../actions/todo'
import { setTodoDialogOpen, setErrorText } from '../../actions/todoDialog';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
const initialstate = {
title: '',
desc: '',
type: '',
imageurl: ''
}
class TodoDialog extends Component {
constructor(props) {
super(props)
this.state = initialstate;
this.onChange = this.onChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
};
onChange(e) {
if (e.target.id === 'title') {
this.setState({ title: e.target.value });
} else if (e.target.id === 'desc') {
this.setState({ desc: e.target.value });
} else if (e.target.id === 'type') {
this.setState({ type: e.target.value });
} else if (e.target.id === 'image') {
this.setState({ imageurl: e.target.value});
console.log(e.target.value);
}
}
handleSubmit() {
const text = {
news_title: this.state.title,
news_description: this.state.desc,
news_type: this.state.type,
news_src_url: this.state.imageurl,
operation:"insert"
}
alert(text.news_src_url);
createBlogPost(text);
setErrorText(undefined);
setTodoDialogOpen(false);
};
render() {
const { messages, todoDialog, setTodoDialogOpen, addTodo, setErrorText } = this.props;
const styles = {
button: {
margin: 12,
},
exampleImageInput: {
cursor: 'pointer',
position: 'absolute',
top: 0,
bottom: 0,
right: 0,
left: 0,
width: '100%',
opacity: 0,
},
};
function handleClose() {
setErrorText(undefined);
setTodoDialogOpen(false);
};
const actions = [< FlatButton label={
messages.cancel || 'cancel'
}
primary={
true
}
onTouchTap={
handleClose
} />, < FlatButton label={
messages.submit || 'submit'
}
primary={
true
}
onTouchTap={this.handleSubmit} />
];
return (
<div>
<Dialog title={messages.todo_add || 'todo_add'} actions={actions} modal={false} open={todoDialog.open} onRequestClose={handleClose}>
<form>
<TextField ref="todoText1" onChange={this.onChange} id='title' hintText={messages.todo_hint1 || 'todo_hint'} errorText={todoDialog.errorText} floatingLabelText={messages.todo_label1 || 'todo_label1'} fullWidth={true} />
<TextField ref="todoText2" onChange={this.onChange} id='desc' hintText={messages.todo_hint2 || 'todo_hint'} errorText={todoDialog.errorText} floatingLabelText={messages.todo_label2 || 'todo_label2'} fullWidth={true} multiLine={true} rows={1} rowsMax={3} />
<TextField ref="todoText3" onChange={this.onChange} id='type' hintText={messages.todo_hint3 || 'todo_hint'} errorText={todoDialog.errorText} floatingLabelText={messages.todo_label3 || 'todo_label3'} fullWidth={true} />
<RaisedButton label='ADD Photo' style={styles.button} labelPosition="before" containerElement="label"><input type='file' onChange={this.onChange} id='image' style={styles.exampleImageInput} /></RaisedButton>
</form>
</Dialog>
</div>
)
}
}
按您的要求处理其他文件。
你是对的,你得到这个错误:
{"code":"INVALID_JSON_INPUT","message":" JSON输入解码错误"}
这意味着您没有以JSON格式发送数据。您需要处理从表单获得的信息,创建一个JSON对象,然后通过POST请求发送它。
您可以使用表单的onSubmit
属性来执行此操作。处理数据从表单到一个新的功能,然后我建议使用fetch发送POST
相关文章:
- 通过数组值返回对象
- 如何将输入范围的值传递给JS中的变量
- 如何将值传递给wicket中的javascript函数
- 将值传递给jquery创建的输入字段
- 如果满足某些条件,我如何才能创建一个只有值的对象
- 获取键的值等于数组值的对象
- js字符串转换为具有两个值的对象
- 需要将select标记选项值传递给ajax函数
- 使用Ajax将PHP值传递给javascript
- 将javascript值传递给PHP
- 将javascript值传递给php是正确的方法
- 将不属于表单的HTML页面中的值传递给php页面
- JavaScript,循环具有不同数量对键值的对象
- Angular,将文本框的动态值传给控制器
- 在key up函数上将文本框值传递给javascript
- 如何找到包含值的对象键's数组
- 可以't使用ajax调用将值传递给Web服务
- 将制表符分隔文件中的值传递给Google Maps对象
- 如何使用reactjs在FORM Submit中做POST,并将对象值传递给REST服务
- 如何将javascript对象值传递给其“”;“孩子”;对象