2016-03-02 19 views
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>

回答

1

API回報JSON,你不需要使用JSONP,只是改變dataTypejsonpjson

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

showResult只設置response因爲response包含ObjectsArray並沒有results財產

this.setState({ 
    data: response 
}); 

Example