Question

我是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格式：

基本网址：http://api.test.com/v1/search?q=test
查询测试：http://api.test.com/v1/search?q=test

典型的json响应如下：

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

问题

如何使用我的#search输入框的内容将查询发送到我的API？所以，如果我在输入框中输入“testing”，如何让我的AJAX脚本请求查询？

Answer 1

您应指定确切的API网址（http://api.test.com/v1/search）并使用data函数的$.ajax()参数，该参数将自动转换为查询字符串。假设您有一个标识为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"/>元素中输入'testing'，请点击ID为'search'的按钮，这将向http://api.test.com/v1/search?q=testing发送GET请求

使用ajax json请求的输入框值

问题

1 个答案: