jQuery Examples

A Simple GET Request

In the following example, we will use jQuery to get information about a particular product. 


    $(document).ready(function() {
        //get product by ID
        $('#id-of-your-form').submit(function () {
            // get and process json
            $.ajax({
                url: "https://services.expertoms.com/api/product/id/12345",
                type: "GET",
                dataType: "json",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Authorization", "Basic username:password");
                },
                success: function (data) {
                    var str = 'Name: ' + data.Name + ', SKU: ' + data.Sku;
                    alert(str);
                }
            }).fail(function (jqXHR, textStatus) {
                alert("Request failed: " + textStatus + " : " + jqXHR.status);
            });

            return false;
        });
    });

A couple things to notice here:

  • GET commands simply call a URL. There is no need to send additional data. Depending on the method, the argument would simply be the last part of the URL. If a method requires more arguments, they will be appended as query strings at the end of the url
  • Remember to set the dataType as "json" if you want to have JSON returned from the service. By default, the service will return XML. If you would prefer to hav XML returned, then set dataType to "xml".
  • All requests MUST be authenticated. The jQuery ajax call makes this simple by using the beforeSend option. Proper syntax for that is shown here

A Simple POST Request

In the following example, we will use jQuery to post an array of product SKUs and recieve an array with Inventory information about those products. 


    $('#id-of-your-form').submit(function () {
        var avbId = 'AVB-123'; //your AVB ID or Dealer ID
        var prodSKUArray = new Array('1234','4321','9876');

        // get and process json
        $.ajax({
            url: "https://services.expertoms.com/api/product/pna-avbid/",
            type: "POST",
            data: { ProductSkus: prodSKUArray, AvbId: avbId },
            dataType: "json",
            traditional: true,
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Authorization", "Basic username:password");
            },
            success: function (data) {
                if (data.length > 0) {
                    var str = "";
                    $.each(data, function () {
                        str += 'Name: ' + this.BrandName + ', SKU: ' + this.Sku + ', Inventory: ' + this.Inventory[0].Quantity + '\n';
                    });
                    alert(str);
                }
                else {
                    alert('No products returned');
                }
            }
        }).fail(function (jqXHR, textStatus) {
            alert("Request failed: " + textStatus + " : " + jqXHR.status);
        });

        return false;
    });

Some special considerations when using POST:

  • When sending arrays using the jQuery ajax call, you must set "traditional" to true.
  • All POST calls must have "type" set to "POST"
  • Don't forget to authenticate!