Ajax

<script type="text/javascript">
    function send() {
        var person = {
            name: $("#id-name").val(),
            address:$("#id-address").val(),
            phone:$("#id-phone").val()
        }

        $('#target').html('sending..');

        $.ajax({
            url: '/test/PersonSubmit',
            type: 'post',
            dataType: 'json',
            success: function (data) {
                $('#target').html(data.msg);
            },
            data: person
        });
    }
</script>

async ajax call with typescript




module AAA {




    $(document).ready(function () {




        $('#aaa').click(function () {

            callservice()

                .done(function (data) {

                    alert('ts ' + data);

                });

        });

    });

    function callservice(): JQueryDeferred<any> {

        var dfd = jQuery.Deferred();

        $.ajax({

            url: "http://localhost:58171/TTT",

            method: "GET",

            contentType: "application/json; charset=utf-8",

            data: {},

            dataType: "json",

            cache: false,

            success: function (data) {

                var value = data;

                dfd.resolve(value);

            },

            error: function (xhr, textStatus, errorThrown) {

                TsMessage.ShowError(xhr.responseText, xhr);

                dfd.reject();

            }

        });

        return dfd;

    }

}

///////////////////////////////

$.getJSON()

 

 var uri = 'api/products?id=123&name=chamith';

    $(document).ready(function () {
      // Send an AJAX request
      $.getJSON(uri)
          .done(function (data) {
            // On success, 'data' contains a list of products.
            $.each(data, function (key, item) {
              // Add a list item for the product.
              $('<li>', { text: formatItem(item) }).appendTo($('#products'));
            });
          });
    });

////////////////////////

Promise 

// first ajax request

 initLookups_1() {

            var defer = $.Deferred();

            $.ajax({

                url: '/admin/facilitysysconfig/getlookup',

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                method: "GET",

                success: (d) => { defer.resolve(d) }

            });

            return defer;

 },

//second ajax request

initLookups_2() {

            var defer = $.Deferred();

            $.ajax({

                url: '/admin/facilitysysconfig/getlookup',

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                method: "GET",

                success: (d) => { defer.resolve(d) }

            });

            return defer;

 },

// wait while both 2 request are over

$.when(this.initLookups_1(), this.initLookups_2()).done(function(e){

  // do something ...

   // e ==> {a:initLookups_1_data,b:initLookups_2_data}

});

------------

button loading icon show

required

font awsome

  <button type="button" id="LoginButton" class="btn btn-block btn-primary mt-lg" data-loading-text="<i class='fa fa-spinner fa-spin '></i>   processing ..">

                            Sign in

                        </button>

ajax call

btn.button('loading');

$.ajax({

url:'logging',

complete:()=>{

btn.button('reset');

}

})

Ajax with promise

function getBookingHeader(e) {
   var defer = $.Deferred();
   $.ajax('/reservation/getbookingheader', { data: { bookingId: e },             success: (d) => { defer.resolve(d) } });
            return defer;
    },


 getBookingDetails(172).done((e) => {
    alert(JSON.stringify(e))
 });


Module Design Pattern

var HTMLChanger = (function() { var contents = 'contents' var changeHTML = function() { var element = document.getElementById('attribute-to-change'); element.innerHTML = contents; } return { callChangeHTML: function() { changeHTML(); console.log(contents); } }; })(); HTMLChanger.callChangeHTML(); // Outputs: 'contents' console.log(HTMLChanger.contents); // undefined