Question

我是reactjs的新手。我想知道如何向服务器发送一个ajax请求（php文件）？我的项目的结构： 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和错误无法发布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);
});

Answer 2

我应该在PHP服务器中找到PHP文件

如何将Post请求发送到我反应的php文件？

2 个答案: