Ajax調用不適用於搜索查詢

我有一個github配置文件查看器反應應用程序，它允許您通過用戶名搜索配置文件。在默認狀態下，我提供了自己的github用戶名，以便登錄頁面是我自己的github配置文件。您可以通過在搜索欄中輸入名稱來搜索配置文件，但是當我嘗試搜索用戶時，我的ajax調用不工作，但是同一個函數正在爲我自己的用戶名返回有效數據。我正的錯誤是如下： -Ajax調用不適用於搜索查詢

Uncaught TypeError: $.ajax is not a function

我主要App.jsx類是如下

class App extends Component{ 

    constructor(props){ 
     super(props); 
     this.state = { 
      username: 'kinny94', 
      userData: [], 
      userRepos: [], 
      perPage: 5 
     } 
    } 

    getUserData(){ 
     $.ajax({ 
      url: 'https://api.github.com/users/' + this.state.username + '?client_id=' + this.props.clientId + '&client_secret=' + this.props.clientSecret, 
      dataType: 'json', 
      cache: false, 
      success: function(data){ 
       this.setState({ 
        userData: data 
       }); 
       console.log(data); 
      }.bind(this), 
      error: function(xhr, status, err){ 
       this.setState({ 
        username: null 
       }); 
       alert(err); 
      }.bind(this) 
     }); 
    } 

    getUserRepos(){ 
     $.ajax({ 
      url: 'https://api.github.com/users/' + this.state.username + '/repos?per_page='+ this.state.perPage +'client_id=' + this.props.clientId + '&client_secret=' + this.props.clientSecret + '&sort=created', 
      dataType: 'json', 
      cache: false, 
      success: function(data){ 
       this.setState({ 
        userRepos: data 
       }); 
      }.bind(this), 
      error: function(xhr, status, err){ 
       this.setState({ 
        username: null 
       }); 
       alert(err); 
      }.bind(this) 
     }); 
    } 

    handleformSubmit(username){ 
     this.setState({ 
      username: username 
     }, function(){ 
      this.getUserData(); 
      this.getUserRepos(); 
     }) 
    } 

    componentDidMount(){ 
     this.getUserData(); 
     this.getUserRepos(); 
    } 

    render(){ 
     return(
      <div> 
       <Search onFormSubmit={this.handleformSubmit.bind(this)}/> 
       <Profile {...this.state}/> 
      </div> 
     ) 
    } 
} 

export default App;

和我的搜索文件如下

class Search extends Component{ 

    onSubmit(e){ 
     e.preventDefault(); 
     let username = this.refs.username.value.trim(); 
     if(!username){ 
      alert('Please Enter a username!'); 
      return; 
     } 

     this.props.onFormSubmit(username); 
     this.refs.username.value = ''; 
    } 

    render(){ 
     return(
      <div> 
       <form onSubmit={this.onSubmit.bind(this)}> 
        <label>Search Github Users </label> 
        <input type="text" ref="username" className="form-control" /> 
       </form> 
      </div> 
     ) 
    } 
}

我的問題是，如果相同的ajax呼叫爲我的用戶名工作，爲什麼它不工作的一個新的隨機用戶名。

來源

2017-09-12 kiiiiNNNNNNNNNyyyy

只是一個建議。您正在加載JQUERY只需通過ajax進行api調用，如果您的唯一目的是進行api調用，則可以使用其他輕量級庫（如axios或superagent）或提取api。 –

我想通了這個問題。我正在使用slim和compressed的常規版本jquery。 ajax不在jquery的slim版本中，所以我只是將其刪除，並使用常規jquery代替。像魅力一樣工作。 :)

來源

2017-09-12 03:25:02 kiiiiNNNNNNNNNyyyy

您必須在您的html中包含jquery腳本。

像這樣的事情在你的HTML：

<script src="jquery-3.2.1.min.js"></script>

來源

2017-09-12 02:39:18

我已經有了。如果我沒有，我甚至不會得到我自己的用戶名的結果。 – kiiiiNNNNNNNNNyyyy

@然後url中必須有一些錯誤。此外，建議在請求中添加呼叫類型。 –

Ajax調用不適用於搜索查詢

回答

相關問題