对 ajax json 请求使用输入框值答案

【问题标题】：Use input box value for ajax json request对 ajax json 请求使用输入框值
【发布时间】：2013-10-12 17:37:04
【问题描述】：

我是 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 脚本请求该查询？

【问题讨论】：

您能否澄清一下您说 如果我在输入框中键入“测试”，我如何让我的 AJAX 脚本请求该查询？你的意思是调用不同的服务器方法？

标签： javascript php jquery ajax json

【解决方案1】：

您应该指定确切的 API url (http://api.test.com/v1/search) 并使用 $.ajax() 函数的 data 参数，该参数将自动转换为查询字符串。假设您有一个 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 为“搜索”的按钮，这将向 http://api.test.com/v1/search?q=testing 发出 GET 请求

【讨论】：