Question

我是API的新手，我对其中的一些有所了解，但还不是全部。当我输入标签时，例如＆＃34; HTML＆＃34;或者＆＃34; JavaScript＆＃34;，我正在尝试编写一个程序，它将为我提供该标签的最佳回答者。当我输入我的结果时，它表示＆＃34; 20结果为undefined，＆＃34;所以出于某种原因，我不认为我的代码是＆＃34;沟通＆＃34; propertly。

我认为它与我的＆＃34; Tagged：已回答＆＃34;部分，但我不确定。你们觉得怎么样？

HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stack Overflow AJAX Demo</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container">
        <div class="intro">
            <div class="left stack-image"></div>
            <div class="explanation">
                <h1>StackOverflow Reputation Builder</h1>
                <p>This app lets you search by topic for unanswered questions on Stack Overflow to help you build your reputation.  Find unanswered questions for a topic you know about, write quality answers, and watch your reputation go up.</p>
                <p>Sometimes, you also need some inspiration. This page also lets you search for the top answerers for a tag. If you want to rise to the top ranks for a topic, see how many reputation points you'll need to aim for!</p>
            </div>
        </div>
        <hr>
        <div class="stack"> 
            <h3>Get Unanswered Questions</h3>
            <p>Find unanswered questions by tag. For multiple tags, use a semi-colon to separate.</p>
            <form class="unanswered-getter" onsubmit="return false;">
                <input type="text" placeholder='e.g., "HTML" or "HTML;CSS"' name="tags" size="30" autofocus required>
                <input type="submit" value="Submit">
            </form>
            <h3>View the Top Answerers for a Tag</h3>
            <form class="inspiration-getter" onsubmit="return false;">
                <input type="text" placeholder="e.g., jQuery" name="answerers" size="30"  required>
                <input type="submit" value="Submit">
            </form>
        </div>
        <div class="results-container">
            <div class="search-results"></div>
            <div class="results"></div>
        </div>
    </div>
    <div class="templates hidden">
        <dl class="result question">
            <dt>Question</dt>
                <dd class="question-text"><a href="" target="_blank"></a></dd>
            <dt>Asked</dt>
                <dd class="asked-date"></dd>
            <dt>Viewed</dt>
                <dd class="viewed"></dd>
            <dt>Asker</dt>
                <dd class="asker"></dd>
        </dl>
        <dl class="resultAnswerer">
            <dt>Name of Answerer:</dt>
                <dd class="answererName"></dd>
            <dt>Score:</dt>
                <dd class="scoreAmount"></dd>
            <dt>Reputation:</dt>
                <dd class="reputationAmount"></dd>

        </dl>
        <div class="error">
            <p>Uh-oh! Something went wrong with your request. Here's what we know:</p>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

使用Javascript：

var showQuestion = function(question) {

    var result = $('.templates .question').clone();

    var questionElem = result.find('.question-text a');
    questionElem.attr('href', question.link);
    questionElem.text(question.title);

    var asked = result.find('.asked-date');
    var date = new Date(1000*question.creation_date);
    asked.text(date.toString());

    var viewed = result.find('.viewed');
    viewed.text(question.view_count);

    var asker = result.find('.asker');
    asker.html('<p>Name: <a target="_blank" '+
                         'href=http://stackoverflow.com/users/' + question.owner.user_id + ' >' +
                            question.owner.display_name +
                        '</a>' +
                '</p>' +
                '<p>Reputation: ' + question.owner.reputation + '</p>'
    );

    return result;
};

var topScorers = function(score){

    var result = $('.templates .resultAnswerer').clone();
    var answererDisplayName = result.find('answererName');
    answererDisplayName.text(score.display_name);;
    var answererScore = result.find('scoreAmount');
    answererScore.text(score.score);
    var answererReputation = result.find('reputationAmount');
    answererReputation.text(score.reputation);

    return result;

}


var showSearchResults = function(query, resultNum) {
    var results = resultNum + ' results for <strong>' + query + '</strong>';
    return results;
};

var showError = function(error){
    var errorElem = $('.templates .error').clone();
    var errorText = '<p>' + error + '</p>';
    errorElem.append(errorText);
};

var getUnanswered = function(tags) {

    var request = { tagged: tags,
                    site: 'stackoverflow',
                    order: 'desc',
                    sort: 'creation'};

    $.ajax({
        url: "http://api.stackexchange.com/2.2/questions/unanswered",
        data: request,
        dataType: "jsonp",//use jsonp to avoid cross origin issues
        type: "GET",
        })
        .done(function(result){ //this waits for the ajax to return with a succesful promise object
            var searchResults = showSearchResults(request.tagged, result.items.length);

            $('.search-results').html(searchResults);
            $.each(result.items, function(i, item) {
                var question = showQuestion(item);
                $('.results').append(question);
            });
        })
        .fail(function(jqXHR, error){ 
            var errorElem = showError(error);
            $('.search-results').append(errorElem);
        });
};

var getAnswerers = function(answered){
    var request = { 
        tagged: answered,
        site: 'stackoverflow',
        order: 'desc',
        sort: 'score',
    };

    $.ajax({
        url: "http://api.stackexchange.com/2.2/tags/" + answered + "/top-answerers/all_time",
        data: request,
        dataType: "jsonp",
        type: "GET",
        })
        .done(function(result){
            var searchResults = showSearchResults(request.tagged, result.items.length);

            $('.search-results').html(searchResults);
            $.each(result.items, function(i,item){
                var score = topScorers(item);
                $('.results').append(score);
            });
        })
        .fail(function(jqXHR, error){
            var errorElem = showError(error);
            $('.search-results').append(errorElem);
        });
}


$(document).ready( function() {


    $('.unanswered-getter').submit(function(){
        $('.results').html('');
        var tags = $(this).find("input[name='tags']").val();
        getUnanswered(tags);
    });

    $('.inspiration-getter').submit(function(){
        $('.results').html('');
        var answered = $(this).find("input[name='tags']").val();
        getAnswerers(answered);
    });

});

Answer 1

您可能在提交表单时调用了getAnswer。表单提交将破坏Javascript上下文。为了使其正常工作，您应该使用简单的点击而不是提交。

检查以下代码：

<html>
    <head>
        <script src="jquery-1.10.2.min.js"></script>
        <script src="https://code.highcharts.com/stock/highstock.js"></script>
        <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
        <style>
            img {
                width: 50px;
                height: 50px;
            }
        </style>
    </head>
<body>
    <input class="tag"/><button class="search">Search</button>
    <div class="search-results"></div>
    <script>
        var topScorers = function(score){

            //Clone result template ode
            var result = $('.templates .resultAnswerer').clone();
            //set the display name in result
            var answererDisplayName = result.find('answererName');
            answererDisplayName.text(score.display_name);;
            //set the user score amount in result
            var answererScore = result.find('scoreAmount');
            answererScore.text(score.score);
            //set the user reputation amount in result
            var answererReputation = result.find('reputationAmount');
            answererReputation.text(score.reputation);

            return result;

        }
        var getAnswerers = function(answered){
            //the parameters I need to pass in our request to StackOverflow's API
            var request = { 
                tagged: answered,
                site: 'stackoverflow',
                order: 'desc',
                sort: 'score',
            };

            $.ajax({
                //the parameters I need to pass in our request to stackOverFlow's API
                //this is the endpoint that I want to use
                url: "http://api.stackexchange.com/2.2/tags/" + answered + "/top-answerers/all_time",
                data: request,
                dataType: "jsonp",
                type: "GET",
            })
            //what the function should do if successful
            .done(function(result){
                //this gives you the search result description
                //var searchResults = showSearchResults(request.tagged, result.items.length);

                showResults(result.items);
            })
            //what the function should do if it fails
            .fail(function(jqXHR, error){
                $('.search-results').text(JSON.stringify(error));
            });
        }

        function showResults (result) {
            var tbody = "";
            var thead = "";
            var firstEl = result[0];
            var propArr = [];
            for(var prop in firstEl) {
                if(typeof firstEl[prop] !== "object") {
                    thead += "<th>" + prop + "</th>";
                    propArr.push(prop);
                } else {
                    var obj = firstEl[prop]
                    for(var propdeep in obj) {
                        thead += "<th>" + propdeep + "</th>";
                        propArr.push(propdeep);
                    }
                }
            }

            result.forEach(function (rowEl) {
                var row = "<tr>";
                var currentEl = null;
                for(var i = 0; i < propArr.length; i++) {
                    currentEl = rowEl[propArr[i]];
                    if(currentEl === undefined) {
                        currentEl = rowEl["user"][propArr[i]]
                    }
                    if(propArr[i] !== "profile_image") {
                        row += "<td>"+ currentEl + "</td>";
                    } else {
                        row += "<td><img src='"+ currentEl + "'></img></td>";
                    }
                }
                row += "</tr>";
                tbody += row;
            });

            var table = "<table><thead>" + thead + "</thead><tbody>" + tbody + "</tbody></table>";
            $('.search-results').html(table);
        }
        $('.search').click(function(){
            //zero out results if previous search has run
            $('.search-results').html('');
            //separate line of code
            var answered = $(".tag").val();
            getAnswerers(answered);
        });
    </script>
</body>
</html>

*编辑********

因为您正在使用＆＃34;返回false;＆＃34;在提交表格时，它没有提交。这实际上很聪明，因为它使我们不必附加鼠标和键事件

您上次发布的代码中有3个错误。

1＆GT;输入文本字段名称为＆＃34; answerers＆＃34;但是在submit（）函数中，它被用作＆＃34;标签＆＃34;。

var answered = $(this).find("input[name='tags']").val();
// should be
var answered = $(this).find("input[name='answerers']").val();

2 - ;从灵感 - 获取者表单调用返回的数据具有与使用的结构不同的结构。每个项目的实际结构如下。

{
    post_count: 0,
    score: 0,
    user: {
        display_name: "",
        link: "",
        profile_image: "",
        reputation: 0,
        user_id: 0,
        user_type: ""
    }
}

3＆GT;应该有一个。（点）在topScorers（）函数中使用的选择器之前。

var answererDisplayName = result.find('answererName'); //should be '.answererName'
answererDisplayName.text(score.display_name);;
var answererScore = result.find('scoreAmount'); //should be '.scoreAmount'
answererScore.text(score.score);
var answererReputation = result.find('reputationAmount'); //should be '.reputationAmount'

那就是它，

以下是更正后的工作代码，

<强> app.js

var showQuestion = function(question) {

    var result = $('.templates .question').clone();

    var questionElem = result.find('.question-text a');
    questionElem.attr('href', question.link);
    questionElem.text(question.title);

    var asked = result.find('.asked-date');
    var date = new Date(1000*question.creation_date);
    asked.text(date.toString());

    var viewed = result.find('.viewed');
    viewed.text(question.view_count);

    var asker = result.find('.asker');
    asker.html('<p>Name: <a target="_blank" '+
                         'href=http://stackoverflow.com/users/' + question.owner.user_id + ' >' +
                            question.owner.display_name +
                        '</a>' +
                '</p>' +
                '<p>Reputation: ' + question.owner.reputation + '</p>'
    );

    return result;
};

var topScorers = function(item){
    var user = item.user;
    var result = $('.templates .resultAnswerer').clone();
    var answererDisplayName = result.find('.answererName');
    answererDisplayName.text(user.display_name);;
    var answererScore = result.find('.scoreAmount');
    answererScore.text(item.score);
    var answererReputation = result.find('.reputationAmount');
    answererReputation.text(user.reputation);

    return result;

}


var showSearchResults = function(query, resultNum) {
    var results = resultNum + ' results for <strong>' + query + '</strong>';
    return results;
};

var showError = function(error){
    var errorElem = $('.templates .error').clone();
    var errorText = '<p>' + error + '</p>';
    errorElem.append(errorText);
};

var getUnanswered = function(tags) {

    var request = { tagged: tags,
                    site: 'stackoverflow',
                    order: 'desc',
                    sort: 'creation'};

    $.ajax({
        url: "http://api.stackexchange.com/2.2/questions/unanswered",
        data: request,
        dataType: "jsonp",//use jsonp to avoid cross origin issues
        type: "GET",
        })
        .done(function(result){ //this waits for the ajax to return with a succesful promise object
            var searchResults = showSearchResults(request.tagged, result.items.length);

            $('.search-results').html(searchResults);
            $.each(result.items, function(i, item) {
                var question = showQuestion(item);
                $('.results').append(question);
            });
        })
        .fail(function(jqXHR, error){ 
            var errorElem = showError(error);
            $('.search-results').append(errorElem);
        });
};

var getAnswerers = function(answered){
    var request = { 
        tagged: answered,
        site: 'stackoverflow',
        order: 'desc',
        sort: 'score',
    };

    $.ajax({
        url: "http://api.stackexchange.com/2.2/tags/" + answered + "/top-answerers/all_time",
        data: request,
        dataType: "jsonp",
        type: "GET",
        })
        .done(function(result){
            var searchResults = showSearchResults(request.tagged, result.items.length);

            $('.search-results').html(searchResults);
            $.each(result.items, function(i,item){
                var score = topScorers(item);
                $('.results').append(score);
            });
        })
        .fail(function(jqXHR, error){
            var errorElem = showError(error);
            $('.search-results').append(errorElem);
        });
}


$(document).ready( function() {


    $('.unanswered-getter').submit(function(){
        $('.results').html('');
        var tags = $(this).find("input[name='tags']").val();

        if(!tags || $.trim(tags) === "") {
            alert("input is empty");
        } else {
            getUnanswered(tags);
        }
    });

    $('.inspiration-getter').submit(function(){
        $('.results').html('');
        var answered = $(this).find("input[name='answerers']").val();
        if(!answered || $.trim(answered) === "") {
            alert("input is empty");
        } else {
            getAnswerers(answered);
        }
    });

});

Answer 2

我弄清楚了我做错了的一部分。

我的名字是'tags'而不是名称'answerers'，所以我的问题的一部分是固定的。

现在，如果我得到结果，它会说“20个HTML结果”或“20个CSS结果”或我使用的任何标签。

现在我只需要弄清楚为什么我的所有结果都是空白的。出于某种原因，它适用于一个按钮，但不适用于另一个按钮。

JavaScript的：

kube-apiserver

HTML：

$('.inspiration-getter').submit(function(){
    $('.results').html('');
    var answered = $(this).find("input[name='tags']").val();
    getAnswerers(answered);
});

StackOverflow API - 显示结果时出现问题

2 个答案: