我在获取中使用post方法遇到了麻烦,因为我的服务器正在从客户端接收到一个空对象。我已经在客户端签入,无法发送我要发送的值。
这是我的服务器:
const express = require('express'); const app = express(); const bodyParser = require('body-parser'); const mysql = require('mysql'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); // connection configurations const mc = mysql.createConnection({ host: 'localhost', user: 'root', password: '12345', database: 'node_task_demo', //socketPath: '/Applications/MAMP/tmp/mysql/mysql.sock' }); // connect to database mc.connect(); // default route app.get('/', function (req, res) { return res.send({ error: true, message: 'hello' }) }); // Here where I'm calling in the client side app.get('/todos', function (req, res) { mc.query('SELECT * FROM tasks', function (error, results, fields) { if (error) throw error; return res.send({ error: false, data: results, message: 'Todo list' }); }); }); // Search for todos with ‘bug’ in their name app.get('/todos/search/:keyword', function (req, res) { var mensaje = 'Todos search list.'; let keyword = req.params.keyword; mc.query("SELECT * FROM tasks WHERE task LIKE ? ", ['%' + keyword + '%'], function (error, results, fields) { if (error) throw error; return res.send({ error: false, data: results, message: mensaje}); }); }); // Retrieve todo with id app.get('/todo/:id', function (req, res) { let task_id = req.params.id; if (!task_id) { return res.status(400).send({ error: true, message: 'Please provide task_id' }); } mc.query('SELECT * FROM tasks where id=?', task_id, function (error, results, fields) { if (error) throw error; return res.send({ error: false, data: results[0], message: 'Todos list.' }); }); }); // Add a new todo app.post('/todo/meterla', function (req, res) { let task = req.body.task; if (!task) { return res.status(400).send({ error:true, message: 'Please provide task' }); } //var task = req.body.task; var query = mc.query("INSERT INTO tasks SET ? ", { task: task}, function (error, results, fields) { if (error) throw error; console.log(task); return res.send({ error: false, data: results, message: 'New task has been created successfully.' }); }); }); // Update todo with id app.put('/todo', function (req, res) { let task_id = req.body.task_id; let task = req.body.task; if (!task_id || !task) { return res.status(400).send({ error: task, message: 'Please provide task and task_id' }); } mc.query("UPDATE tasks SET task = ? WHERE id = ?", [task, task_id], function (error, results, fields) { if (error) throw error; return res.send({ error: false, data: results, message: 'Task has been updated successfully.' }); }); }); // Delete todo app.delete('/todo', function (req, res) { let task_id = req.body.task_id; if (!task_id) { return res.status(400).send({ error: true, message: 'Please provide task_id' }); } mc.query('DELETE FROM tasks WHERE id = ?', [task_id], function (error, results, fields) { if (error) throw error; return res.send({ error: false, data: results, message: 'Task has been updated successfully.' }); }); }); // all other requests redirect to 404 app.all("*", function (req, res, next) { return res.send('page not found'); next(); }); // port must be set to 8080 because incoming http requests are routed from port 80 to port 8080 app.listen(8081, function () { console.log('Escuchando por el puerto 8081'); }); // allows "grunt dev" to create a development server with livereload module.exports = app;
这是我的客户:
import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { constructor(props) { super(props); this.state = {data: ""}; this.state_2 = {message: []}; this.onSubmit = this.handleSubmit.bind(this); } componentDidMount() { fetch('/todo/1') .then((response) => response.json()) .then((responseJson) =>{ this.setState({ message: responseJson.data }); }) } handleSubmit(e){ e.preventDefault(); var self = this; // On submit of the form, send a POST request with the data to the server. fetch('/todo/meterla',{ method: 'POST', body:{ task: self.refs.task.value } }) .then(function(response){ return response.json() }).then(function(body){ console.log(body); alert(self.refs.task.value) }); } render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <form onSubmit={this.onSubmit}> <input type="text" placeholder="task" ref="task"/> <input type="submit"/> </form> <p className="App-intro"> Este es el resultado de la consulta = <b>{JSON.stringify(this.state.message)}</b> </p> </div> ); } } export default App;
主体必须是字符串形式+不要忘记内容类型
fetch('/todo/meterla',{ method: 'POST', body: JSON.stringify({ task: self.refs.task.value }), headers: {"Content-Type": "application/json"} }) .then(function(response){ return response.json() }).then(function(body){ console.log(body); alert(self.refs.task.value) });