在AJAX js调用中动态赋值

Dynamically assigning values in AJAX js calls

本文关键字：动态 赋值 调用 AJAX js      更新时间：2023-09-26

我最近开始尝试react，我正试图突破界限(至少在我看来，这似乎是魔法)。

我试图创建一个组件，张贴到一个预定义的API，使用动态数据结构，即我想传递数据参数作为一个道具。下面是我当前AJAX代码的一个示例:

  createModalSubmit(form) {
    var name = this.refs.name.value;
    $.ajax({
      url: `/items.json`,
      type: 'POST',
      data: item:{name: name} ,
      success: (item) => {
        this.setState({
          item: {
            name: ''
          },
          errors: {},
          showModal: false
        });
      },
      error: (item) => {
        this.setState({errors: item.responseJSON.errors})
      }
    });
  },

在这段代码中，我如何将data属性作为prop传递?我尝试这样做作为一个函数，即:

  formData() {
    return {
      myData: {
        item: {
          name: name
        }
      }
    }
  },

然后将this传递给我的data属性为'this。formData'，但这似乎并不能提供快乐。

我也尝试过使用变量，但上面的函数方法对我来说最有意义。

传递动态值到ajax js调用的最佳方式是什么?

下面是一个如何在React中向ajax调用传递动态值的示例:http://codepen.io/PiotrBerebecki/pen/ZpRyKb

在这个例子中，父组件App正在维护一个包含url的对象的状态。然后，父组件通过props向其子组件(Time和Photo)提供单独的url。

完整代码:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      urls: {
        time: 'http://date.jsontest.com',
        photos: 'http://jsonplaceholder.typicode.com/photos'
      }
    };
  }
  render() {
    return (
      <div>
        <Time url={this.state.urls.time} />
        <Photo url={this.state.urls.photos} />
      </div>
    );
  }
}

class Time extends React.Component {
  constructor() {
    super();
    this.state = {
      data: null
    };
  }
  componentDidMount() {
    $.ajax({
      type: "GET",
      url: this.props.url,
      success: (response) => {
        this.setState({
          data: response.time,
        });
      }
    });
  }
  render() {
    let content;
    if (this.state.data) { 
      content = (
        <div>
          <h1>Current Time</h1>
          <p>{this.state.data}</p>
        </div>
      );
    } else {
      content = <div>Loading...</div>;
    }
    return (
      <div>
        {content}
      </div>
    );
  }
}
class Photo extends React.Component {
  constructor() {
    super();
    this.state = {
      data: null
    };
  }
  componentDidMount() {
    $.ajax({
      type: "GET",
      url: this.props.url,
      success: (response) => {
        this.setState({
          data: response,
        });
      }
    });
  }
  render() {
    let content;
    if (this.state.data) { 
      content = (
        <div>
          <h1>Photo</h1>
          <img src={this.state.data[0].url}/>
        </div>
      );
    } else {
      content = <div>Loading...</div>;
    }
    return (
      <div>
        {content}
      </div>
    );
  }
}
ReactDOM.render(
  <App />,  document.getElementById('content')
);
相关文章：