4

私はjavascript/jqueryの初心者であり、APIをまったく使用したことがないので、誰かが何かを手伝ってくれるかどうか疑問に思っています。

私が達成しようとしているのは、ユーザーにキーワード/フレーズをテキストボックスに入力させ、検索をクリックすると、ページにその単語がツイートに含まれているユーザーのリストが返されるようにすることです。

これまで、ハードコードされたキーワード（Webサイトから取得）の結果を表示できましたが、変更しようとしても何も返されません。

これがハードコードで動作するものです

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.getJSON('http://search.twitter.com/search.json?q=earthquake&lang=en&callback=?', function (data) {
            var data = data.results;
            var html = "<ul>";
            for (var i = 0; i < data.length; i++) {
                html += "<li><a href='http://twitter.com/" + data[i].from_user + "'>@"
                          + data[i].from_user + "</a>: " + data[i].text + "</li>";
            }
            html += "</ul>"
            $('.content').html(html);
        });
    });
</script>

<h2>Twitter</h2>
<div class="content">
</div>

そして、これが私が今取り組んでいるコードです

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

    <script>

        var button= document.getElementById('searchTwitter');
        button.onclick= function(){
            var text = document.getElementById('search').value;
        }
        var baseUrl = "http://search.twitter.com/search";


        var query = document.getElementById('<%=searchTwitter.ClientID%>').value;

        $(document).ready(function () {


            $.ajax({

                url: baseUrl + '&text' + '&lang=en&callback=?',

                dataType: "jsonp",

                success: showResults
            });
        });
            function showResults(data) {

                var data = data.results;
                var html = "<ul>";
                for (var i = 0; i < data.length; i++) {
                    html += "<li><a href='http://twitter.com/" + data[i].from_user + "'>@"
                              + data[i].from_user + "</a>: " + data[i].text + "</li>";
                }
                html += "</ul>"
                $('.content').html(html);

        }



    </script>

    <asp:TextBox ID="search" runat="server"></asp:TextBox>
    <asp:Button ID="searchTwitter" runat="server" Text="Button" />

私は何日もこれを行う方法を見つけようとしてきたので、どんな助けでも大歓迎です。

どうもありがとう

4

2 に答える 2

1

これがあなたが説明していることの実際的な例です：http：//jsfiddle.net/ZEjey/。ASPコードに適合させることができるはずです。

以下の関連コード。

JQuery

$("#SearchButton").click(function() {
    $.getJSON('http://search.twitter.com/search.json?q=' + $('#TextSearch').val() + '&lang=en&callback=?', function (data) {
            var data = data.results;
            var html = "<ul>";
            for (var i = 0; i < data.length; i++) {
                html += "<li><a href='http://twitter.com/" + data[i].from_user + "'>@"
                          + data[i].from_user + "</a>: " + data[i].text + "</li>";
            }
            html += "</ul>"
            $('.content').html(html);
        });
});

HTML

<h2>Twitter</h2>
Search for: <input id="TextSearch" type="text" /> <input type="button" id="SearchButton" value="Go" />
<div class="content"></div>​

---

編集0

さて、以下のコードは機能します。自動的にポストバックが発生するため、<asp:Button何も読み込まれません。代わりにを使用する<input type="button" ...か、以下で行ったようにを使用して通常のイベントの発生を停止する必要がありevent.preventDefault();ます。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h2>Twitter</h2>
    <asp:TextBox id="TextSearch" runat ="server"/> 
    <asp:Button id="SearchButton" runat="server"  Text="Search"/>
    <div class="content"></div>​
    </div>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
    <script>
        $(document).ready(function () {
            $("#SearchButton").click(function () {

                event.preventDefault(); // ADD THIS LINE TO YOUR CODE

                $('.content').html("<em>loading...<em>");
                $.getJSON('http://search.twitter.com/search.json?q=' + $('#TextSearch').val() + '&lang=en&callback=?', function (data) {
                    var data = data.results;
                    var html = "<ul>";
                    for (var i = 0; i < data.length; i++) {
                        html += "<li><a href='http://twitter.com/" + data[i].from_user + "'>@" + data[i].from_user + "</a>: " + data[i].text + "</li>";
                    }
                    html += "</ul>";
                    $('.content').html(html);
                })
                .success(function() { alert("second success"); })
                .error(function() { alert("error"); })
                .complete(function() { alert("complete"); });
            });
        });
    </script>
    </form>
</body>
</html>
于 2012-12-17T00:45:04.570 に答える
0

ボタンがクリックされたときではなく、ドキュメントの準備ができた状態でajaxリクエストを行っているようです。また、テキストボックスからクエリに値を追加している場所もわかりません。コードを変更する方法は次のとおりです。

//this code will run when the page loads and set up the button so the 
//onclick event executes your function
$(document).ready(function () {
    var button = document.getElementById('<%=searchTwitter.ClientID%>');
    //you need to make the ajax request in this function, because this 
    //is fired when the search button is clicked 
    button.onclick = function() {
        var text = document.getElementById('search').value;
        var baseUrl = "http://search.twitter.com/search.json";
        var query = document.getElementById('<%=search.ClientID%>').value;
        $.ajax({
            //you're building the request url here, with the text from the 
            //box as the q parameter
            url: baseUrl + '?q=' + query + '&lang=en&callback=?',
            dataType: "jsonp",
            success: showResults
        });
    };
});

//this function can be defined outside ready()
function showResults(data) {
    var data = data.results;
    var html = "<ul>";
    for (var i = 0; i < data.length; i++) {
        html += "<li><a href='http://twitter.com/" + data[i].from_user + "'>@"
            + data[i].from_user + "</a>: " + data[i].text + "</li>";
    }
    html += "</ul>";
    //I'm assuming you have a div with a content class on your page
    $('.content').html(html);
}

Chrome開発者ツール（またはFirefoxのFirebug）を試してみることもできます。ブレークポイントを設定して、各ステップで何が起こっているかを確認できます。また、送信されたリクエストと返されたデータを確認することもできます。それはあなたに何が起こっているかについてのより良いハンドルを与えるのを助けるでしょう。

于 2012-12-17T00:55:54.997 に答える