Question

在这里，我编写了一个代码，它从API http://fcctop100.herokuapp.com/api/fccusers/top/recent获取数据，并在控制台上显示启动器，但我得到的错误就像“parsererror”“错误：jQuery21106393266040831804_1456914722748未被调用”

var App = React.createClass({
    //setting up initial state
    getInitialState:function(){
        return{
            data:[]
        };
    },
    componentDidMount(){
        this.getDataFromServer('http://fcctop100.herokuapp.com/api/fccusers/top/recent');
    },
    //showResult Method
    showResult:function(response){
        console.log(response);
        this.setState({
            data:response.results
        });
    },
    //making ajax call to get data from server
    getDataFromServer:function(URL){
        $.ajax({
            type:"GET",
            dataType:"jsonp",
            url:URL,
            success: function(response) {
                this.showResult(response);
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    render:function(){
        return(
            <div>
                <Result />
            </div>
        );
    }
});
var Result = React.createClass({
    render:function(){
        return(
            <div>
                <ul>
                    <ResultItem/>
                </ul>
            </div>
        );
    }
});
var ResultItem = React.createClass({
    render:function(){
        return(
            <div>
                <li>Hello This Is From ResultItem Component</li>
            </div>
        );
    }
});
ReactDOM.render(
    <App />,
    document.querySelector("#app")
);

<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title>React Tutorial</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div id="app"></div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>

Answer 1

您的API返回JSON，您不需要使用JSONP，只需将dataType从jsonp更改为json < / p>

$.ajax({
  type: "GET",
  dataType: "json",
  ....
});

并且showResult仅设置response，因为response包含Array Objects且没有results属性

this.setState({
  data: response
});

Example

得到错误“parsererror”“错误：jQuery21106393266040831804_1456914722748未被调用”在Ajax上调用Reactjs

1 个答案: