Question

我使用reactjs创建了一个登录页面，当我通过post方法发送我的用户输入/密码时，使用rest api调用来验证我收到错误。请问有人帮我解决了什么问题！

我想这是因为我无法以json格式发送用户名和密码字符串。

这是错误，

Command B

这是我的app.js文件，

<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>

        );
    }

}

当我提供用户输入/密码并点击提交时，没有任何事情发生。

Answer 1

首先获取你想要插入数据的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在tododialouge.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>
    )
}
}

其他一些文件你处理你的要求。我希望这个对你有帮助。

Answer 2

你没错，你收到了这个错误：

{“code”：“INVALID_JSON_INPUT”，“message”：“解码JSON输入时出错”}

这意味着您不是以JSON格式发送数据。您需要处理从表单获得的信息，创建JSON对象，然后通过POST请求发送它。

您可以使用表单的onSubmit属性执行此操作。将表单中的数据处理为新函数，然后我建议using fetch发送POST

如何在FORM中进行POST使用reactjs提交并将对象值传递给REST服务？

2 个答案: