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);
        }
    });
});

如果您在<input type="text" id="searchInput"/>元素中键入“测试”，然后单击 ID 为“搜索”的按钮，这将发出 GET 请求http://api.test.com/v1/search?q=testing

于 2013-10-12T20:44:35.873 回答