如何在reactjs中使用jquery ajax

Question

我想在 reactjs 中使用 jquery ajax。但它 return 不能 post 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

如果您已正确导入 jquery，它应该与 React 中的任何异步 http 调用相同：

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

Answer 2

设置使用 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 3

首先应在 PHP 服务器中找到 php 个文件，然后设置 header 如下所示：

<?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)
})

箭头函数：

With arrow functions, this will always represent the object that defined the arrow function.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'
           });
        }
      })

如何在reactjs中使用jquery ajax

How to use jquery ajax in reactjs

javascript

jquery

reactjs