首页>demo10

Demo10 - Ajax请求 by zuojj at 01 Jul 2016

本实例通过$.getJSON请求Most Popular JavaScript Projects in Github with stars、watchers and forks。PS：有的时候会请求不到数据

HTML

<div id="reposList" class="reposList"></div>

CSS

.reposList {
    width: 700px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0 10px;
}

.tc {
    text-align: center;
}

JAVASCRIPT

/**
 * 本示例请求github repositrories stars
 */

var RepositoryList = React.createClass({
    getInitialState: function() {
        return  {
            loading: true,
            error: null,
            data: null
        }
    },
    componentDidMount: function() {
        $.getJSON(this.props.source)
        .done(function(data) {
            this.setState({
                loading: false,
                data: data
            })
        }.bind(this))
        .fail(function(error) {
            this.setState({
                loading: false,
                error: error
            });
        }.bind(this));
    },
    render: function() {
        if(this.state.loading) {
            return <p className="tc">loading...</p>;
        }

        if(this.state.error !== null){
            return <p className="tc">Error: {this.state.error.message}</p>
        }

        var data = this.state.data || {},
            items = data.items,
            total = data.total_count,
            reposList = items.map(function(item, index, arr) {
                return (
                    <li key={index}>
                        <h3 className="title"><a href={item.html_url}>{item.name}</a></h3>
                        <p className="num">Stars：{item.stargazers_count}，Watchers：{item.watchers_count}，Forks：{item.forks_count}</p>
                        <p className="desc">{item.description}</p>
                    </li>
                )
            });

        return (
            <div className="repos-list">
                <h1 className="tc">Most Popular JavaScript Projects in Github</h1>
                <h2 className="tc">Total: {total}</h2>
                <ol>{reposList}</ol>
            </div>
        );
    }
});

ReactDOM.render(<RepositoryList source="https://api.github.com/search/repositories?q=javascript&sort=stars"/>, document.getElementById('reposList'));