繁体   English   中英

无法使用 Axios 以 React 形式将数据发布到 NodeJS

[英]Unable to post data to NodeJS using Axios in React form

我想从反应表单获取票证价值到 nodeJS,然后根据收到的票证,我必须执行一些任务并将结果取回前端。 我的代码似乎很好,但它没有在环境中运行。

表单.js

import React, { Component } from 'react'
import axios from 'axios'
class Formdata extends Component{
    constructor() {
        super();
        this.state = {
          ticket:""
        };
      }
    onChanges(val){
        console.log(val);
        this.setState({
            ticket:val
        })
        console.log(this.state.ticket)
    }
    handleSubmit() {

        console.log(this.state.ticket)
        const var2= {
            tic:this.state.ticket
        };
        axios.post("/user",{
            var1: var2
        })
        .then((response)=> {
            console.log("Data submitted successfully");
         }).catch((error)=> {
            console.log("got errr while posting data", error);
         });
    }

    render(){
        return(
            <div>
                <form onSubmit={this.handleSubmit} method="POST">
                    <br/>
                    <input type="text" id="ticket" name="ticket" onChange={e=>this.onChanges(e.target.value)} placeholder="Ticket Number"/>
                    <button type="submit">SUBMIT</button>
                </form>
            </div>
        )
    }
}

export default Formdata;

服务器.js

const express = require('express');

const app = express();

app.post('/user',function(request,response){
  const query1=request.body.var1;
  console.log(query1)
  response.query1;
  });


const port = 5000;

app.listen(port, () => `Server running on port ${port}`);
    axios.post("http://localhost:5000/user",{
        var1: var2
    })



const express = require('express');

const app = express();
app.use(express.json());
const bodyParser  = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}));

app.post('/user',function(request,response){
  const query1=request.body.var1;
  console.log(query1)
  response.query1;
  });


const port = 5000;

app.listen(port, () => `Server running on port ${port}`);

你试试下面的代码:

const express = require('express');

const app = express();

app.use(express.json())
app.use(express.urlencoded({ extended: true }))

app.post('/user',function(request,response){
  const body =request.body;
  console.log(body);
  res.send(body);
  });

app.listen(5000, () => `Server running on port 5000`);

您可以将代码复制到您的代码中,然后从邮递员那里调用 api:

  1. API URL: localhost:5000/users
  2. 将方法更改为: POST方法
  3. 不要忘记将 json 对象添加body
  4. 向后端发送请求

我希望它的工作。

请使用并签入文件:

var bodyParser = require('body-parser');
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({
   extended: false
}));
app.use(bodyParser.json());

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM