Ajax in CakePHP

// This article is an article by the elasticsearch NiO expert. it is published in the sixth phase of PHP & more. You are welcome to download PHP & more vol 6.

Ajax in cakephpcake

CakePHP (hereinafter referred to as "cake", the version used in this article is 0.10.7.1856 RC3) supports Ajax Based on prototype and script. aculo. without the Ajax Implementation of the server and client. Therefore, to use Ajax in cake, you must first be familiar with prototype and script. aculo. but the focus of this article is not the two outstanding JavaScript libraries. To put it bluntly, cake actually simplifies the tedious Ajax JavaScript code.

Ajax-related files in cake

In cake, there are only two Ajax-related files:

• Cake/cake/libs/View/templates/layouts/ajax. thtml
• Cake/cake/libs/View/helpers/ajax. php

The Ajax. thtml file is used for output layout after Ajax operations are executed. Unlike the general layout file, it is an empty Layout View File with no Header/footer or other content. The Ajax. php file is the Ajax helper class ajaxhelper for the cake View File. This class contains many Ajax action-related methods. For details about the API, see http://api.cakephp.org/class_ajax_helper.html.

In addition to the above two files, we also need prototype of prototype. JS and script. aculo. *. JS files, which can be downloaded on the official website *. place the JS file in the cake/APP/webroot/JS/directory. For these two databases, the versions used in this article are 1.4.0 and 1.5.1.

Hello, Ajax world!

Now we use a simple example to demonstrate how to use Ajax in cake. This example will load the "Hello, Ajax world!" output by the server on the page after clicking the link !" Information. For the sake of simplicity, no database is used in the example, that is, no cake model is used, but only controller and view are used ). First, create a Layout View File cake/APP/views/layouts/demo. thtml for customizing the layout and loading JavaScript files to be used. The content of this file is as follows:

html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”    ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  CakePHP AJAX Demo    
  

Focus on the two lines of $ JavaScript-> Link (), including the required Javascript file prototype. JS and scriptaculous. JS, and script. aculo. other JavaScript files in the US Library are created by scriptaculous. javaScript code is included in a unified manner. You do not need to write additional code. If you do not want to use a script. aculo. all JS files of us can be specified with the load parameter. For example, we only use effects. JS, you can do this (Separate multiple values with commas ):

Next, create a controller file cake/APP/controllers/demos_controller.php:

The Controller has three key points:

• Set the default layout to demo. thtml so that prototype. js can be used in the index view.
• Add the "ajax" helper class to the view helper class array $ helpers.
• For the Ajax Action Method Hello (), you need to set its current layout to "ajax"

Corresponding to the two methods (Actions) in the controller, we need to create two view files in the cake/APP/views/demos/directory: Index. thtml and hello. thtml.

index.thtml：

Loading…
 

This view has three elements: Loading, view, and Ajax link. In the initial state, the loading and view are hidden (display: none). After the Ajax link is clicked, the loading is displayed in the loading state. After loading, the loading and view are hidden, "Hello, Ajax world!" Display in view. The focus of this view is $ Ajax-> Link (). $ Ajax is the object instance of ajaxhelper. The first parameter of the Link () method is the text displayed by the link, the second parameter is the URL of cake. The URL here is/demos/Hello, pointing to the Ajax Action Method Hello (). This action finally outputs the view hello. thtml. The third parameter is the Ajax option. Cake automatically generates the JavaScript code used in the link based on the options. For a simple Ajax action, we mainly set three options: Update, loading, and complete. The meanings of these options are described in detail in the comments of the view code.

Finally, it is the hello. thtml View File, just a simple line of text:

  
   Hello, AJAX world!
  

OK. We have completed this example by using as few encoding as possible.Http://www.somesite.com/cake/demos/View the final result.

Live Search

Live Search refers to Real-Time query. Generally, users enter the keyword they want to query in the text box, and the client JavaScript observes the text box. Once the user input is detected, the search results are immediately submitted to the server, and display the results returned by the server. Next we will use Ajax of cake to implement Live Search, get the data that matches the query keyword from an array, and then update it to the page instantly.

First, modify our controller demos_controller.php and add a search () method ():

In the index. thtml View File, add the form code of Live Search:

Here we use another method observefield () in ajaxhelper. This method is used to observe whether the data of an element changes. When the data changes, the corresponding Ajax operation is called. The first parameter of the method is the ID of the element to be observed. Here is the "livesearch" text box, and the second parameter is the Ajax option, which is similar to the link () method, however, the options here include URL and frequency. url is the cake URL, which corresponds to the method in the Controller. frequency is the observed interval, measured in seconds ", that is, check every second to see if the corresponding element has changed.

For the search () method, create the View File cake/APP/views/demos/search. thtml:

Okay, this live search is complete, isn't it easy? Now you only need to input characters in the text box, it will be searched in the $ Langs array, all results that contain the query keyword are returned and updated to the view element.

Other applications

Cake's ajaxhelper also provides many methods, such as drag (), drop (), and dropremote () for dragging; sortable () for sorting; AutoComplete () for Automatic completion () wait. I will not go into depth for the time being because of the large length of explanation involved. If I have time, I will try again one by one. Drag/drop can be seen in the cake framework Ajax demo I wrote online demo, and can be downloaded to the source code.

Some Problems

Some methods of the current cake version (0.10.7.1856 RC3) are not very complete. Some parameters in the script. aculo. US Library of the latest version are not supported yet. I believe they will be updated soon. In practical application may encounter Chinese garbled problem, it is because the XMLHttpRequest obtained data are UTF-8 encoding, so there are two solutions, one is that all pages, database data are coded using UTF-8, which can save a lot of trouble, the other is through PHP iconv () function for transcoding, but this requires the use of iconv extension, so it is a little more troublesome, and it increases the extra burden on the server.

Related Resources

• Prototype
• Script. aculo. Us
• Cake ajaxhelper API
• Cake framework Ajax demo
• CakePHP Ajax helper
• Using ajax (and company) with cake
• Ajax in CakePHP sample source code

From: http://www.infor96.com /~ NiO/Ajax-in-CakePHP/