jquery ajax sample code 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: difference between type and method in ajax

An alias for method. You should use type if you're using versions of jQuery prior to 1.9.0.

Example 3: 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 4: ajax jquery example

$.ajax({

   url     : "file.php",
   method  : "POST",

       data: { 
         //key                      :   value 
         action                   	:   action , 
         key_1   					:   value_key_1,
         key_2   					:   value_key_2
       }
   })

   .fail(function() { return false; })
	// Appel OK
   .done(function(data) {

   console.log(data);

 });

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: $.ajax example

class DB {
		private $host = 'localhost';
		private $user = 'root';
		private $password = '';
		private $db_name = 'library';
		public $conn;
		public function connect() {
			$this-> conn = new mysqli($this-> host, $this-> user, $this-> password, $this-> db_name);
					
			return $this -> conn;

		
	}

}

Tags:

Misc Example