Thinkphp fully supports Ajax

Source: Internet
Author: User
Tags mootools
Thinkphp fully supports thinkphp for Ajax, and also has a built-in smartaajax and thinkajax class libraries. You can use Ajax in thinkphp without using any other Ajax class library package.
First, let's talk about thinkphp's Js class library and how to introduce the JS class library in thinkphp.

JS class library
The thinkphp framework comes with a JS class library that is easy to expand and can be easily imported using the tag library technology and js method.
The introduction of JS class libraries opens a new dimension for the development of thinkphp and enterprise applications. It also defines a relatively simple JS import specification for thinkphp-based application development. This specification is similar to the namespace import method of the thinkphp base class library, and can also be applied to the import of CSS files. The following is an example:
Introduction of JS class libraries based on tag Library Technology

  • <HTML: Import Type = 'js'
    File = 'js. base'
    /> HTML: Import file = 'js. util. Calendar'
    />
  • <

You can use the HTML: import tag to introduce the required JS file. If no type is specified, the default value is JS. You can set the import root directory or use the basepath parameter. The preceding labels indicate the import of JS/base. JS, JS/util/calendar. JS, ../public/JS/common. js.
This method of JS import is explicit. In addition to the above label library, thinkphp also supports the implicit js method to import JS files.
The _ import method is defined in the base. js file, which can be used in a function similar to the HTML: import tag, for example:

  • <Script language = 'javascript '>
    Importbasepath =
    'Http: // localhost/public /';
    _ Import ('js. Form. checkform ');
    // --> </SCRIPT>
  • <! --

To use the _ import method to implicitly import the required JS class library in the JS file, you must load the base. JS file and set the importbasepath parameter (that is, to import the root directory), and this method can only import JS files.
In addition, the JS class library provided by thinkphp also provides methods to import JS and CSS based on file names: importjs and importcss.
Currently, the thinkphp framework has limited JS class libraries, but developers can easily expand their own JS class libraries. As thinkphp continues to improve, it will certainly provide richer JS class libraries.
Currently, the following class libraries are provided:

  • Base. js basic file
  • String directory string operation extension class
  • Util directory tool Library
  • Form directory form operation class library

Smartajax and thinkajax
Smartajax is an Ajax class library. It is a pure JS solution. It can be implemented by referring to some functions of coreajax. It supports HTML element and event binding Ajax operations, form submission, and regular execution. It supports updating results. Combined with thinkphp, thinkajax specifically processes thinkphp in the returned data format. Other usage is similar to smartajax.

Main attributes:
Updatetip // update the prompt information. The HTML method // submit method post or get effect // is supported to update the effect. The mootools class library is used, for example, {"font-size": [0, 25]. "opacity": [1, 0.3]} main methods:

// Send an Ajax request
Send (submit URL, submit parameters, the result shows the DIV object or ID, update display effect, scheduled execution interval)

// Send the form Ajax operation
Sendform (form object or ID, submit URL, the result shows the DIV object or ID, update the display effect)

// Bind Ajax operations to HTML elements and events
BIND (source HTML element or ID, bind event, submit URL, submit parameter, the result shows Div object or ID, update effect)

// Perform Ajax operations during page loading
Load (submit URL, submit parameters, the result shows the DIV object or ID, update effect)

// Periodically execute Ajax operations
Repeat (submit URL, submit parameters, the result shows the DIV object or ID, execution interval, update effect)

Example:

  • // Load the required class library
  • <Script language = 'javascript 'src = '/JS/prototype. js'> </SCRIPT>
    <Script language = 'javascript 'src = '/JS/mootools. js'> </SCRIPT>
  • <Script language = 'javascript 'src = '/JS/smartajax. js'> </SCRIPT> smartajax. updatetip = "Updating ~ ";
  • Smartajax. effect = {'font-size': [0.3], 'opacity ': [1,]};
  • // Execute load. php In the background through Ajax during page loading
  • Smartajax. Load ('HTTP: // localhost/load. php', "name = thinkphp", "result ");
  • // Bind the click operation to the HTML element whose ID is run and execute Ajax
  • Smartajax. BIND ('run', 'click', 'HTTP: // localhost/Hello. php', "name = thinkphp", "result ");
  • // Execute time. php every one second and Output
  • Smartajax. Repeat ('HTTP: // localhost/time. php', "", $ ('timer '), 1000 );
  • // Submit form data in Ajax Mode
  • Smartajax. sendform ('login', app + '/user/checklogin/', 'result', dologin );

Ajax File Upload
The thinkphp framework provides built-in implementation for Ajax File Upload (non-real Ajax. The IFRAME method is used to support file upload. Combined with the thinkphp File Upload class, you can easily upload and batch upload files. The following is a typical sample code for file upload:

  • <Form ID = "Upload"
    Method = post action = "_ app _/Attach/insert /"
    Enctype = "multipart/form-Data"
    Target = "iframeupload">
    Input type = "hidden"
    Name = "_ ajax_submit _"
    Value = "1">
    IFRAME name = "iframeupload"
    Src = ""
    Width = "350"
    Height = "35"
    Frameborder = 0 scrolling = "no"
    Style = "display: none"> </iframe>
    Input type = "hidden"
    Name = "_ uploadfileresult"
    Value = "result">
    Input type = "hidden"
    Name = "_ uploadfiletype"
    Value = "JPG, GIF, PNG"
    > Input type = "hidden"
    Name = "_ uploadsaverule"
    Value = "{$ user. ID}">
    Input type = "hidden"
    Name = "_ uploadformid"
    Value = "Upload">
    Input type = "hidden"
    Name = "_ uploadfilesize"
    Value = "20480"
    > Input type = "hidden"
    Name = "_ uploadresponse"
    Value = "uploadcomplete">
    Input type = "file"
    Name = "file">
    Input type = "Submit"
    Value = "Upload"
    > Form>
  • <
  • <
  • <
  • <
  • <
  • <
  • <
  • <
  • <
  • <
  • </

After the upload is complete, the thinkphp system will return JS Code and data in IFRAME, and update the result tag of the page according to the custom method. For more information about file upload, see the document upload tutorial.

Back-end Ajax data return
Smartajax is an independent front-end JS class library and does not need to be supported by the backend. However, in terms of background processing and data return, combined with some improved processing provided by the thinkphp framework, the background development efficiency can be improved. First, when the page is submitted using Ajax, use _ ajax_submit _ to hide the variable or Ajax variable. The background can automatically identify this operation as an Ajax operation and handle it accordingly. For example, in the form submission Ajax mode, add
<Input type = "hidden" name = "_ ajax_submit _" value = "1">

If you use the smartajax. Send method to submit an operation, add the Ajax variable directly to the parameter.

  • Smartajax. Send ('url', 'ajax = 1 & name = thinkphp', 'result );

After the background action class is processed, it is easy to use:
Ajaxreturn ($ data, $ info, $ status) to return data to the client, where
$ Data indicates the data to be returned from the client, which can be a string, array, or object (encoded by json_encode and can be directly used by JS)
$ Info indicates the prompt information (such as operation success or failure)
$ Status indicates the operation status code. (1 indicates success. 0 indicates failure. You can define it by the application, and the client can handle it accordingly)
In general, we need to use echo or exit to output data and set utf8 encoding. the most troublesome thing is to perform JSON encoding on our own. Using the ajaxreturn method, everything is processed internally. In addition, it is convenient to not only return data, but also return operation status (such as operation failure or success) and related prompts. Thinkphp is compatible with JSON processing, both PhP4 and PhP5 can directly use the json_encode method to encode PHP objects, arrays, strings, and Other types into JSON data and return it to the client for processing by Js.

To better obtain the information returned by the ajaxreturn method of thinkphp background action, a thinkajax class library is added to the Framework JS class library to provide full support for background Ajax information return. The usage of the thinkajax class is basically similar to that of smartajajax, But it simplifies the operation. You only need to define the processing method for receiving data on the client, and the other classes are automatically processed by the thinkajax class library, including information prompts. A thinkajax example:

  • Thinkajax. sendform ('formid ',' _ URL _/Action/', complete );
    Complete (data, status, Info ){
    // Obtain and process the returned data}
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.