Question

我有一个github个人资料查看器反应应用程序，允许您按用户名搜索个人资料。在默认状态下，我提供了自己的github用户名，以便着陆页是我自己的github配置文件。您可以通过在搜索栏中输入名称来搜索个人资料，但是当我尝试搜索用户时，我的ajax调用无法正常工作，但同样的功能是为我自己的用户名返回有效数据。我得到的错误如下： -

未捕获的TypeError：$ .ajax不是函数

我的主要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调用我的用户名，为什么它不能使用新的随机用户名。

Answer 1

您必须在html中加入jquery脚本。

你的html中有这样的东西：

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

Answer 2

我弄明白了这个问题。我正在使用slim和compressed jquery常规版本。 ajax版本不在slim jquery中，因此我只是将其删除并使用常规jquery代替for(int y=0; y<4; y++){ if(cost[y] <= min && visit[y] == 0){ min = cost[y]; currentRow = y; }//if //<-- not here }//for loop for col of dij array. visit[currentRow] = 1;。像魅力一样工作。：）

Ajax调用不适用于搜索查询

2 个答案: