Question

我试图在ReactJS中创建POST请求但是它不起作用我继续

POST http://localhost:3000/ 404 (Not Found)

误差，

有人可以帮助我，但是我做错了我现在已经尝试了4个多小时而且它变得烦人了：/

这是我的app.jsx文件

import React from 'react';
import ReactDOM from 'react-dom';
import "./main.css";
import $ from 'jquery'; 

class ContactForm extends React.Component{
    componentDidMount(){
        var $form = $('.send_JSON');
        var $inputName = $('.get_name');
        var $inputAge = $('.get_age');
        var $inputPrefix = $('.get_prefix');
        var $inputEmail = $('.get_email');
    
        var url = 'http://localhost:3000/'; //Configurable endpoint
        
        function loadJSON(){
            $.ajax({
                url: url,
                dataType: 'json'
            }).done(function(res){
                console.log(res);
                console.log("DONE!")
            }).fail(function(error){
                console.log(error);
                console.log("NOT DONE!")
            });
    
        }

        function sendForm(send_name, send_age, send_prefix, send_email){
            $.ajax({
                url: url,
                method: 'post',
                dataType: 'json',
                data : {
                    name : send_name,
                    age : send_age,
                    prefix : send_prefix,
                    email : send_email
                }
            }).done(function(res){
                loadJSON();
                console.log(res);
            }).fail(function(error){
                console.log('Error while sending Form');
                readyToSubmit : '0';
            });
        }

        $form.on('submit', function(e){
            e.preventDefault();
    
            var name = $inputName.val();
            var age = $inputAge.val();
            var prefix = $inputPrefix.val();
            var email = $inputEmail.val();
    
            if(name !== '' && age > 0 && email !== ''){
                sendForm(name, age, prefix, email);
                $inputName.val('');
                $inputAge.val(0);
                $inputPrefix.val('');
                $inputEmail.val('');
    
            }
    
        });
    }

    state = {
        name: 'Name',
        age: '',
        prefix: '-',
        email : 'E-mail address',
        nameCheck: '',
        ageCheck: '',
        emailCheck: '',
        readyToSubmit: ''
    }

    handleSubmit = (e)=>{
       e.preventDefault()
        sendForm();
    this.setState({
            nameCheck: this.state.name.length <= 0 && 'Name field has to be filled.',
            ageCheck: this.state.age.length <= 0 && 'Age has to be more than 0',
            emailCheck: this.state.email.search('@') <= 0 && 'Email field has to be filled and consist @',
            readyToSubmit: this.state.name.length > 0 && this.state.age.length > 0 && this.state.email.search('@') > 0 ? `Success ${this.state.name}` : '',
    })
    }

    handleChange = e =>{
        this.setState({
            name: e.target.value,
        })
    }

    handleChange2 = e =>{
        this.setState({
            age: e.target.value
        })
    }

    handleChange3 = e =>{
        this.setState({
            prefix: e.target.value
        })
    }

    handleChange4 = e =>{
        this.setState({
            email: e.target.value
        })
    }

    clearForm = () => {
        document.getElementById("sendForm").reset(); 
        this.setState({
          name: "",
          age: "",
          prefix: "Mr",
          email: "  "
        })
      }


      
    render(){
        return(
            <div>
        
           <span className="tooltip">{this.state.readyToSubmit}</span>

                <form onSubmit = {this.handleSubmit} id="sendForm" className="send_JSON">
                <h2>Sii Application</h2>
                <img src="../img/logo.png"/>
                    <p>Your Name</p>
                    <span className="tooltip">{this.state.nameCheck}</span>
                    <input onChange = {this.handleChange} value ={this.state.name} className="get_name"/>
                    <p>Your Age</p>
                    <span className="tooltip">{this.state.ageCheck}</span>
                    <input onChange = {this.handleChange2} value ={this.state.age} type="number" min="10" max="100" className="get_age"/>
                    <p>Your Prefix</p>
                    <select onChange = {this.handleChange3} value = {this.state.prefix} className="get_prefix">
                    <option value = 'Mr'>Mr</option>
                    <option value = 'Ms'>Ms</option>
                    <option value = 'Mrs'>Mrs</option>
                    </select>
                    <p>Your Email</p>
                    <span className="tooltip">{this.state.emailCheck}</span>
                    <input onChange = {this.handleChange4} value ={this.state.email} type="email" className="get_email"/>
                    
                    <button type="reset" onClick = {this.clearForm} name="clear">Clear</button>
                    <button type="submit" name="send">Send</button>
                </form>
                
        
            </div>
        )
    }
}

class App extends React.Component {
    render(){
        return <ContactForm/>
    }
}


document.addEventListener('DOMContentLoaded', function(){
    ReactDOM.render(
        <App/>,
        document.getElementById('app')
    );
});

我不知道是否有其他方法可以这样做，我尝试过Axio - 它根本不适用于我。

Answer 1

我建议您查看fetch（）API而不是使用jQuery Ajax来制作HttpRequest。它更轻量级，使您的代码看起来更简单。以下是Jake Archibald博客的链接，Google建议他们学习如何使用fetch（）：

https://jakearchibald.com/2015/thats-so-fetch/

另外，您可以在Google官方文档中找到一些有用的示例： https://developers.google.com/web/updates/2015/03/introduction-to-fetch

我希望它有所帮助。

Answer 2

添加到fetch（）API，您还可以使用axios来制作HttpRequest。它是基于promise的HTTP客户端，用于浏览器和node.js。

文档很简单且可用here。

以下是GET请求的示例：

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
 console.log(error);
});

// Optionally the request above could also be done as
axios.get('/user', {
 params: {
   ID: 12345
 }
})
.then(function (response) {
 console.log(response);
})
.catch(function (error) {
 console.log(error);
});

// Want to use async/await? Add the `async` keyword to your outer 
function/method.
async function getUser() {
try {
 const response = await axios.get('/user?ID=12345');
 console.log(response);
 } catch (error) {
 console.error(error);
 }
}

ReactJS，发出POST请求

2 个答案: