Как использовать jquery ajax в реагировать

Question

Я хочу использовать jquery ajax в реагировать. но возвращение не может опубликовать insert.php. и другой вопрос, как я могу получить доступ к объекту this.state и this.setSate в случае успеха?

class Name extends React.Component{
   constructor(){
      super();
      this.state={name:''}
  }
  btnClick=()=>{
    $.ajax({
        url:'insert.php',
        type:'POST',
        dataType:'json',
        data: JSON.stringify({me:'Hamid'}),
        success:function (data,status ,xhr) {
            alert(data.name)
        }
    })

}
render() {
    return(
        <div><span>{this.state.name}</span>
        <button type='button' onClick={this.btnClick}>show</button>
        </div>
    )
}
}

 ReactDOM.render(<Name/>,document.getElementById('root1'));

Answer 1

установить, используя this.setState ({name: data.name});

class Name extends React.Component{
   constructor(){
      super();
      this.state={name:''}
  }
  btnClick=()=>{
    $.ajax({
        url:'insert.php',
        type:'POST',
        dataType:'json',
        data: JSON.stringify({me:'Hamid'}),
        success:function (data,status ,xhr) {
             this.setState({name: data.name});

        }
    })

}
render() {
    return(
        <div><span>{this.state.name}</span>
        <button type='button' onClick={this.btnClick}>show</button>
        </div>
    )
}
}

Answer 2

Сначала нужно найти php-файлы на PHP-сервере и установить заголовок примерно так:

<?php
 header('Access-Control-Allow-Origin: http://localhost:3000');

, а затем, чтобы иметь доступ к «this» в свойствах успеха или ошибки, что их значения являются функциями, которые мыследует связать 'this' с этими функциями или использовать функции стрелок в качестве значений успеха и ошибки.

связать 'this' с функциями:

   $.ajax({
    url:'http://localhost/react/api/insert.php',
    type:'POST',
    dataType:'json',
    data: JSON.stringify({me:'Hamid'}),
    success:function (data,status ,xhr) {
         this.setState({name: data.name});
    }.bind(this)
})

Функция стрелки:

С помощью функций стрелок это всегда будет представлять объект, который определил функцию стрелки. W3Schools

        $.ajax({
           url:"http://localhost/react/api/insert.php",
          type:'post',
          dataType:'json',
          data: JSON.stringify({me:'Hamid'}),
          success:(data, status,xhr) =>{
          this.setState({
             username:data.name
          });
        error:(XMLHttpRequest, textStatus, errorThrown)=>  {
           this.setState({
               username:'error'
           });
        }
      })

Answer 3

Если вы правильно импортировали jquery, он должен совпадать с любым асинхронным http-вызовом в React:

btnClick=()=>{
    $.ajax({
        url:'insert.php',
        type:'POST',
        dataType:'json',
        data: JSON.stringify({me:'Hamid'}),
        success: (data,status ,xhr) => {
            this.setState({ name: data.name });
        }
    })