Ajax 调用不适用于搜索查询答案

【问题标题】：Ajax call not working on search queryAjax 调用不适用于搜索查询
【发布时间】：2017-09-12 02:36:56
【问题描述】：

我有一个 github profile viewer react 应用程序，它允许您通过用户名搜索个人资料。在默认状态下，我提供了我自己的 github 用户名，因此登录页面是我自己的 github 个人资料。您可以通过在搜索栏中输入名称来搜索个人资料，但是每当我尝试搜索用户时，我的 ajax 调用都不起作用，但是相同的功能正在为我自己的用户名返回有效数据。我得到的错误如下：-

未捕获的类型错误：$.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 呼叫适用于我的用户名，为什么它不适用于新的随机用户名。

【问题讨论】：

只是一个建议。您正在加载 JQUERY，只需通过 ajax 进行 api 调用，如果您的唯一目的是进行 api 调用，则可以使用其他轻量级库，如 axios 或 superagent 或 fetch api。

标签： javascript jquery ajax api reactjs

【解决方案1】：

您必须在 html 中包含 jquery 脚本。

在你的 html 中有这样的东西：

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

【讨论】：

我已经有了。如果我没有那个，我什至不会得到我自己的用户名的结果。
@那么 url 中肯定有一些错误。建议在请求中添加调用类型。
@Pritam Banerjee 我在我的 bigcommerce 网站中添加了 ajax 添加到购物车按钮，它适用于主页和产品页面，但仅适用于搜索结果页面 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> </script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

【解决方案2】：

我发现了问题所在。我同时使用了slim 和compressed 常规版本的jquery。 ajax 不在jquery 的slim 版本中，所以我只是将其删除并改用常规的jquery。像魅力一样工作。 :)

【讨论】：