0

私は JavaScript を初めて使用しますが、JSON および AJAX を介して API をクエリし、結果を表示できるスクリプトを作成しようとしています。

これは私がこれまでに持っているコードです: http://jsfiddle.net/spadez/62Ler/7/

$('#search').click(function (event) {
    $.ajax({
        url: "api.test.com",
        type: "GET",
        dataType: "json",
        timeout: 5000,
        context: this,
        beforeSend: function () {
            $('#content').fadeTo(500, 0.5);
        },
        success: function (data, textStatus) {
            $('html, body').animate({
                scrollTop: '0px'
            }, 300);
        $('#content').html(data.objects[0].category+'<br>'+data.objects[0].company);
        },
        error: function (x, t, m) {
            if (t === "timeout") {
                alert("Request timeout");
            } else {
                alert('Request error');
            }
        },
        complete: function () {
            $('#content').fadeTo(500, 1);
        }
    });
});

API の URL 形式が次のようになっているとします。

一般的な json 応答は次のようになります。

https://gist.github.com/employ/0b24c1c065d6a671de76

質問

#search 入力ボックスの内容を使用してクエリを API に送信するにはどうすればよいですか? では、入力ボックスに「testing」と入力した場合、AJAX スクリプトがそのクエリを要求するようにするにはどうすればよいでしょうか?

4

1 に答える 1

2

正確な API URL ( http://api.test.com/v1/search ) を指定し、クエリ文字列に自動的に変換される関数のdataパラメーターを使用する必要があります。$.ajax()id を持つ入力テキスト要素があると仮定すると、次のsearchInputことができます。

$('#search').click(function (event) {
     var searchedValue = $('#searchInput').val();
     $.ajax({
        url: "http://api.test.com/v1/search", // Your API search URL
        type: "GET",
        data: {q: searchedValue}, // Your query parameter
        dataType: "json",
        timeout: 5000,
        context: this,
        beforeSend: function () {
            $('#content').fadeTo(500, 0.5);
        },
        success: function (data, textStatus) {
            $('html, body').animate({
                scrollTop: '0px'
            }, 300);
            $('#content').html(data.objects[0].category+'<br>'+data.objects[0].company);
        },
        error: function (x, t, m) {
            if (t === "timeout") {
                alert("Request timeout");
            } else {
                alert('Request error');
            }
        },
        complete: function () {
            $('#content').fadeTo(500, 1);
        }
    });
});

要素に「testing」と入力<input type="text" id="searchInput"/>し、ID「search」のボタンをクリックすると、GET リクエストが実行されますhttp://api.test.com/v1/search?q=testing

于 2013-10-12T20:44:35.873 に答える