Question

我试图将我的json结果变成我的反应代码

代码如下所示

from tkinter import*
tk=Tk()
tk.title("App Manager")
tk.resizable(0,0)
tk.wm_attributes("-topmost",1)
canvas=Canvas(tk,width=460,height=500,bg='black',bd=0,highlightthickness=0)
canvas.pack()
tk.update()
def pong():
    tk.destroy()
    import PONG
def bounce():
    tk.destroy()
    import BOUNCE
def calculator():
    import CALCULATOR
def quit1():
    tk.destroy()
b1=Button(tk,text="Play PONG",font= ('Bold',15),bg='brown',fg='gold',command=pong)
b1.pack(side=LEFT)
b2=Button(tk,text="Play BOUNCE",font=('Bold',15),bg='brown',fg='gold',command=bounce)
b2.pack(side=LEFT)
b3=Button(tk,text="CALCULATOR",font=('Bold',15),bg='brown',fg='gold')
b3.pack(side=LEFT)
b4=Button(tk,text="Quit",font=('Bold',15),bg='brown',fg='gold',command=quit1)
b4.pack(side=RIGHT)

如何将AJAX提取到此中？

Answer 1

首先，要使用AJAX获取数据，您有以下几种选择：

Fetch API，它将在some browsers中开箱即用（您可以使用polyfill在其他浏览器中使用它）。有关示例实现，请参阅this answer。
用于数据获取的库（通常适用于所有现代浏览器）。 Facebook recommends以下内容：
- superagent
- reqwest
- react-ajax
- axios
- request

下一步，您需要在React组件中的某个位置使用它。您在何处以及如何执行此操作取决于您的具体应用和组件，但通常我认为有两种情况需要考虑：

获取初始数据（例如用户列表）。
获取数据以响应某些用户互动（例如，点击一个按钮添加更多用户）。

获取初始数据应该在生命周期方法componentDidMount()中完成。来自React Docs：

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      username: '',
      lastGistUrl: ''
    };
  },

  componentDidMount: function() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  },

  componentWillUnmount: function() {
    this.serverRequest.abort();
  },

  render: function() {
    return (
      <div>
        {this.state.username}'s last gist is
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  mountNode
);

这里他们使用jQuery来获取数据。虽然这样做很好，但使用这么大的库（在大小方面）执行这么小的任务可能不是一个好主意。

获取数据以响应例如一个动作可以这样做：

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      users: []
    };
  },

  componentWillUnmount: function() {
    this.serverRequest && this.serverRequest.abort();
  },

  fetchNewUser: function () {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      var users = this.state.users
      users.push(lastGist.owner.login)
      this.setState({ users });
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        {this.state.users.map(user => <div>{user}</div>)}
        <button onClick={this.fetchNewUser}>Get new user</button>
      </div>
    );
  }
});

ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  mountNode
);

Answer 2

让我们来看看fetch API：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

让我们说我们想要在我们的组件中获取一个简单的列表。

export default MyComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            lst: []
        };

        this.fetchData = this.fetchData.bind(this);
    }

    fetchData() {
        fetch('url')
        .then((res) => {
            return res.json();
        })
        .then((res) => {
            this.setState({ lst: res });
        });
    }
}

我们从服务器获取数据，我们从服务中获取结果，我们将转换为json，然后我们设置结果，该结果将是状态中的数组。

Answer 3

您可以在componentDidMount中使用jQuery.get或jQuery.ajax：

import React from 'react';

export default React.createClass({
...
    componentDidMount() {
        $.get('your/url/here').done((loadedData) => {
            this.setState({data: loadedData});
    });
...
}

Answer 4

首先我想使用fetchAPI现在像zepto的ajax一样安装ajax，reactjs的渲染是asyn，你可以在构造函数中初始化一个状态，然后通过fetch的结果改变数据。

如何在响应中加载AJAX

4 个答案: