검색 쿼리에서 Ajax 호출이 작동하지 않습니다.

github 프로필 뷰어를 사용하면 사용자 이름별로 프로필을 검색 할 수 있습니다. 기본 상태에서 내 자신의 github 사용자 이름을 제공하여 방문 페이지가 내 자신의 github 프로필이되도록했습니다. 검색 창에 이름을 입력하여 프로필을 검색 할 수 있지만 사용자를 검색하려고 할 때마다 ajax 통화가 작동하지 않지만 동일한 기능이 내 사용자 이름에 유효한 데이터를 반환합니다. 다음과 같이 내가 점점 오전 오류 : -검색 쿼리에서 Ajax 호출이 작동하지 않습니다.

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> 
     ) 
    } 
}

내 질문을 다음과 같다

Uncaught TypeError: $.ajax is not a function

내 주요 App.jsx 클래스는 동일한 ajax이 내 사용자 이름에 대한 작업을 호출하면 새 무작위 사용자 이름이 작동하지 않는 이유는 무엇입니까?

출처

2017-09-12 kiiiiNNNNNNNNNyyyy

그냥 제안. JQuery를로드하는 중 ajax를 통해 API 호출을 수행하는 경우 Axios 또는 Superagent와 같은 다른 간단한 라이브러리를 사용하거나 API 호출을 수행하는 것이 유일한 목적 인 경우 API를 가져올 수 있습니다. –

나는이 문제를 알아 냈어. 나는 slim과 compressed 정규 버전 jquery을 사용하고있었습니다. ajax은 slim 버전이 jquery이 아니므로 삭제하고 일반 jquery을 대신 사용했습니다. 매력처럼 일했다. :)

출처

2017-09-12 03:25:02 kiiiiNNNNNNNNNyyyy

스크립트를 HTML에 포함시켜야합니다. 당신의 HTML에서이 같은

뭔가 :

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

출처

2017-09-12 02:39:18

나는 이미 그것을 가지고있다. 내가 그걸 가지고 있지 않다면, 나는 내 자신의 사용자 이름에 대한 결과조차 얻지 못할 것이다. – kiiiiNNNNNNNNNyyyy

@ 그 URL에 약간의 오류가있을 것입니다. 또한 요청시 통화 유형을 추가하는 것이 좋습니다. –

검색 쿼리에서 Ajax 호출이 작동하지 않습니다.

답변

관련 문제