How to Use JQuery and Ajax in Drupal

The following is the simplest Ajax call using jQuery:

$ ('# Somediv'). load (url );

The code above indicates: first look for a div with the ID "someDiv", load the HTML content of the set url, and insert it into this div. In fact, this example is actually AHAH rather than Ajax, because it directly returns HTML and does not need to be parsed. On the other hand, in a strict sense, the resources returned by Ajax from the server are XML data, which must be parsed before being displayed on your webpage. But in fact, only a few Ajax applications return XML data. A more common data format (server-returned data) is JSON. This is what we are using in Drupal.

When you need to process (analyze) the data returned from the server, the following jQuery tool functions provide powerful flexibility.

The code is as follows:	Copy code
$. Get (url, parameters, callback ); $. Post (url, parameters, callback ); $. Ajax (options );

The only difference between $. get and $. post is that the http request sends parameters to the server (passing the second parameter of the array. In Drupal, in most cases, you do not need to send any parameters, because you have set the called URL (menu callback), for example, "ajax/get/node_details" requires a parameter "nid", so you only need to call "ajax/get/node_details/123" in the menu callback ", nid does not need to be passed as the parameter of the second variable.

Now let's look at a very simple example to learn how it works. Assume that there is a slide page on your website, similar to a common news website: there are digital buttons under the picture. Clicking these digital buttons will change the displayed image without the need to reload the page. Well, to complete this example, you must first set the page so that the first image is output to a container (in this example, we will assume that the first image is loaded normally; all images are nodes), and then all necessary numeric buttons are output. Then, you need to create a module to define your Ajax callback. Set menu callback in the module. The code is as follows:
   

The code is as follows:

Copy code

/** * Implementation of hook_menu (). */ Function myModule_menu (){ $ Items ['photos/get/photos'] = array ( 'Page callback' => 'mymodule _ get_photos_ajax ', 'Type' => MENU_CALLBACK, 'Access arguments' => array ('Access content '), ); Return $ items; }    Function mymodule_get_photos_ajax ($ nid ){ $ Photo = mymodule_get_photo ($ nid); // returns the filepath of my photo $ Image = theme ('image', $ photo ); Drupal_json (array ('status' => 0, 'data' => $ image )); }

The path of our JavaScript request is photos/get/photos/123, of which 123 is the nid of the image to be searched, and the mymodule_get_photos_ajax () function uses nid, place the path of the image to be returned in a JSON object.

The following is our JavaScript code:

The code is as follows:

Copy code

Drupal. behaviors. myModule = function (context ){ $ ('A. photo_button: not (. mymodule-processed) ', context). addClass ('mymodule-processed ') . Bind ('click', function (){ $. Get ('/photos/get/photos/' + parseInt (this. id, 10), null, imageDetails ); Return false; }); }   Var imageDetails = function (response ){ Var result = Drupal. parseJson (response); // use Drupal. parseJson to parse the returned json data $ ('Div. field-type-image div.field-item'example .html (result. data ); }