0
在這裏,我寫了從API http://fcctop100.herokuapp.com/api/fccusers/top/recent並顯示獲取數據的控制檯首發,但我發現錯誤,如代碼「parsererror」「錯誤: jQuery21106393266040831804_1456914722748當時不叫」得到錯誤「parsererror」「錯誤:jQuery21106393266040831804_1456914722748當時還不叫」在Ajax調用Reactjs
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>