Use input box value for ajax json request

Question

I am new to javascript but I am trying to build a script which can query an API via JSON and AJAX and display the results.

This is the code I have so far: 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);
        }
    });
});

Let's say the API has this URL format:

Base URL: http://api.test.com/v1/search?q=test
Query for test: http://api.test.com/v1/search?q=test

A typical json response would be as follows:

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

Question

How do I use the contents of my #search input box to send the query to my API? So, if I type "testing" in my input box, how do I make my AJAX script request that query?

Can you please clarify what you what it to do when you say if I type "testing" in my input box, how do I make my AJAX script request that query? Do you mean call different server methods? — iCollect.it Ltd
– iCollect.it Ltd, Commented Oct 12, 2013 at 18:13

user2874828 · Accepted Answer · 2013-10-12 20:44:35Z

You should specify your exact API url (http://api.test.com/v1/search) and use the data parameter of the $.ajax() function which will be automatically converted to a query string. Assuming you have an input text element with id searchInput you can do :

$('#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);
        }
    });
});

If you type 'testing' in your <input type="text" id="searchInput"/> element then click on your button with id 'search' this will do a GET request to http://api.test.com/v1/search?q=testing

Collectives™ on Stack Overflow

Use input box value for ajax json request

Question

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Question

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related