Jquery Ajax Example

Posted on  by admin

Dynamically load HTML page in div tag using jquery; In this tutorial, you will learn how to load html page or external page content in div tag using jquery. Use the jQuery ajax $.load method to load external html page or html page into a div. Ajax $ .load () method is fetch the data or content, another page into a div, external HTML into div from the other pages or server.

Ajax $ .load method sends asynchronous requests from server, retrieves the data from server and replaces content without refreshing/reloading the entire webpage or to load an external webpage into a div of a html page.

url: This is the required parameter. This is specifies the URL of the file you want to load. data: This is used to sent some to the server with request.

success : This function to be executed when request succeeds. This example will demonstrate to you how to send HTTP load requests to the server and get the data from the server.

We need to create a html file name “load.html” and store into your web server and replace the below code here.

After that we need to create one file name load-demo.html and put the below code here.

In this above ajax post() method example. The url parameter is first parameter of the $.load method and it help to retrieve the content or text from the web server.

The Next parameter data is a data to submit form data in JSON format, In pair of key value.

jQuery load() Method

OpenWeatherMap API

Success is a callback function that is executed when the request completes.

Description: Perform an asynchronous HTTP (Ajax) request. A string containing the URL to which the request is sent. Type: PlainObject. A set of key/value pairs that configure the Ajax request.

Loading Simple Data

  • All settings are optional. A default can be set for any option with $.ajaxSetup().
  • See jQuery.ajax( settings ) below for a complete list of all settings. Type: PlainObject. A set of key/value pairs that configure the Ajax request.
  • All settings are optional. A default can be set for any option with $.ajaxSetup().

Type: PlainObject. A set of key/value pairs that map a given dataType to its MIME type, which gets sent in the Accept request header.

This header tells the server what kind of response it will accept in return.

For example, the following defines a custom type mycustomtype to be sent with the request: Note: You will need to specify a complementary entry for this type in converters for this to work properly.

async (default: true). By default, all requests are sent asynchronously (i.e.

this is set to true by default). If you need synchronous requests, set this option to false.

Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation.

Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done().

Type: Function( jqXHR jqXHR, PlainObject settings ). A pre-request callback function that can be used to modify the jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object before it is sent. Use this to set custom headers, etc.

The jqXHR and settings objects are passed as arguments. This is an Ajax Event. Returning false in the beforeSend function will cancel the request.