jquery ajax request example

Example 1: ajax exmaple\

$.ajax({
    url:'your url',
    type: 'POST',  // http method
    data: { myData: 'This is my data.' },  // data to submit
    success: function (data, status, xhr) { // after success your get data
        $('p').append('status: ' + status + ', data: ' + data);
    },
    error: function (jqXhr, textStatus, errorMessage) { // if any error come then 
            $('p').append('Error' + errorMessage);
    }
});

Example 2: ajax call

$.ajax({
        url: "Url",
        dataType: "json",
        type: "Post",
        async: true,
        data: {"Key":value,"Key2":value2},
        success: function (data) {
                
        },
        error: function (xhr, exception, thrownError) {
            var msg = "";
            if (xhr.status === 0) {
                msg = "Not connect.\n Verify Network.";
            } else if (xhr.status == 404) {
                msg = "Requested page not found. [404]";
            } else if (xhr.status == 500) {
                msg = "Internal Server Error [500].";
            } else if (exception === "parsererror") {
                msg = "Requested JSON parse failed.";
            } else if (exception === "timeout") {
                msg = "Time out error.";
            } else if (exception === "abort") {
                msg = "Ajax request aborted.";
            } else {
                msg = "Error:" + xhr.status + " " + xhr.responseText;
            }
            if (callbackError) {
                callbackError(msg);
            }
           
        }
    });

Example 3: jquery ajax post

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Example 4: ajax syntax in javascript

var id = empid;

$.ajax({
    type: "POST",
    url: "../Webservices/EmployeeService.asmx/GetEmployeeOrders",
    data: "{empid: " + empid + "}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(result){
        alert(result.d);
        console.log(result);
    }
});

Example 5: make ajax calls with jQuery

// GET Request
    $.ajax({
        url: "example.php?firstParam=Hello&secondParam=World", //you can also pass get parameters
        dataType: 'json',	//dataType you expect in the response from the server
        timeout: 2000
    }).done(function (data, textStatus, jqXHR) {
        //your code here
    }).fail(function (jqXHR, textStatus, errorThrown) {
        console.log("jqXHR:" + jqXHR);
        console.log("TestStatus: " + textStatus);
        console.log("ErrorThrown: " + errorThrown);
    });

//POST Request
    var formData = {name: "John", surname: "Doe", age: "31"}; //Array 
    $.ajax({
        url: "example.php",
        type: "POST", // data type (can be get, post, put, delete)
        data: formData, // data in json format
       	timeout: 2000,	//Is useful ONLY if async=true. If async=false it is useless
        async: false, // enable or disable async (optional, but suggested as false if you need to populate data afterwards)
        success: function (data, textStatus, jqXHR) {
            //your code here
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log("jqXHR:" + jqXHR);
            console.log("TestStatus: " + textStatus);
            console.log("ErrorThrown: " + errorThrown);
        }
    });


//Alternatively, the old aproach is
    $.ajax({
        url: "api.php?action=getCategories",
        dataType: 'json',
        timeout: 2000,
        success: function (result, textStatus, jqXHR) {   //jqXHR = jQuery XMLHttpRequest
            /*You could put your code here but this way of doing it is obsolete. Better to use .done()*/
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log("jqXHR:" + jqXHR);
            console.log("TestStatus: " + textStatus);
            console.log("ErrorThrown: " + errorThrown);
        }
    });

Example 6: jquery ajax post

// Variable to hold request
var request;

// Bind to the submit event of our form
$("#foo").submit(function(event){

    // Prevent default posting of form - put here to work in case of errors
    event.preventDefault();

    // Abort any pending request
    if (request) {
        request.abort();
    }
    // setup some local variables
    var $form = $(this);

    // Let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");

    // Serialize the data in the form
    var serializedData = $form.serialize();

    // Let's disable the inputs for the duration of the Ajax request.
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);

    // Fire off the request to /form.php
    request = $.ajax({
        url: "/form.php",
        type: "post",
        data: serializedData
    });

    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        // Log a message to the console
        console.log("Hooray, it worked!");
    });

    // Callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // Log the error to the console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });

    // Callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // Reenable the inputs
        $inputs.prop("disabled", false);
    });

});