javascript - 如何将 Post 请求发送到我 react 的 php 文件？

Question

我是reactjs新手。我想知道如何向服务器(php 文件)发送ajax 请求？我的项目的结构: enter image description here

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
class User extends React.Component{
constructor(){
    super();
    this.state={username:'someone'}
}
click_btn=()=>{
    var xhttp = new XMLHttpRequest();
    xhttp.open("POST", "insert.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("fname=Henry&lname=Ford");

}
render() {
    return(
        <div><h1>{this.state.username}</h1>
        <button type='button' onClick={this.click_btn}>show</button>
        </div>
    )
}
}

它返回状态 404 和错误 Can not post insert.php!我应该在哪里找到我的 insert.php 或者如何解决它？

Answer 1

创建一个 php 文件夹并将 php 文件移入其中 - 这应该可以工作。

$.ajax({ 
    type:"POST",
    url:"php/insert.php",
    data: JSON.stringify(this.state), 
    contentType: 'application/json',
    success: function(res) {
        console.log(res);
        console.log("Added");
    }.bind(this),
    error: function(xhr, status, err) {
        console.error(xhr, status, err.toString());
    }.bind(this)
}); 

或

fetch('php/insert.php', { // URL
    body: JSON.stringify(this.state), // data you send.
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    headers: {
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // *manual, follow, error
    referrer: 'no-referrer', // *client, no-referrer
})
.then(function(response) {
    // manipulate response object
    // check status @ response.status etc.
    return response.json(); // parses json
})
.then(function(myJson) {
    // use parseed result
    console.log(myJson);
});