Home Backend Development PHP Tutorial ThinkPHP usage experience sharing-ThinkPHP + Ajax to implement 2-level linkage drop-down menu_PHP tutorial

ThinkPHP usage experience sharing-ThinkPHP + Ajax to implement 2-level linkage drop-down menu_PHP tutorial

Jul 13, 2016 am 10:29 AM
ajax thinkphp

The first is the design of the database. The classification table is called cate.

What I am doing is secondary linkage of classified data. The fields required for the data are: id, name (Chinese name), pid (parent id).

Setting of parent id: If the data does not have an upper level, the parent id is 0. If there is an upper level, the parent id is the id of the upper level.

After the database has content, you can start writing code to implement secondary linkage.

First obtain all the data with pid 0 in the background php, save it to $cate, and then use a foreach loop to output it in the first layer's
']}">{$v.ca_name}


Tag:



Ajax code:

Copy code The code is as follows:

  $('#type').click(function(){
            $(this).change(function(){
                var objectModel = {};
                var   value = $(this).val();
               var   type = $(this).attr('id');
                objectModel[type] =value;
                $.ajax({
                    cache:false,
                    type:"POST",
                    url:site.web+"lable",
                    dataType:"json",
                    data:objectModel,
                    timeout:30000,
                    error:function(){
                        alert(site.web+"lable");
                    },
                    success:function(data){
                        $("#lables").empty();
                        var count = data.length;
                        var i = 0;
                        var b="";
                           for(i=0;i                               b+="";
                           }
                        $("#lables").append(b);
                    }
                });
               });
        }
    );

Ajax代码在第一层类型改变后触发,ajax方法的主要参数有

      1.url:后台接收ajax的地址;

      2.data:传到后台的数据,一般用json传递;这里传递的是选中类的id值。

      3.type:传递方法,有get和post方法,我一般用post,可以传输的数据比get多,安全性也高些;

      4.error:ajax执行失败的方法;

      5.success:ajax执行成功的方法,也就是回调函数。这里在执行success时,我先用empty()清空了第二个下拉菜单的内容,然后再输出从后台获取的数据。

下面是Thinkphp接收ajax数据并处理的页面

复制代码 代码如下:

//Backend ajax verification
$result = array();
$cate =$_POST['type'];
$result = M('cate')-> where(array('ca_pid'=> $cate))->field('ca_id,ca_name')->select();
$this->ajaxReturn($result,"JSON");

Thinkphp's I() method can actually be regarded as $_POST[], so as to obtain the ID of the first-level selected content passed by ajax, then obtain its subclass, and then use ajaxReturn() to return it to ajax, here The return data is set to be in json form, so ajax will receive the data in json form

Native PHP return data method:

Copy code The code is as follows:

//The search result is $result
.....
echo json_encode($result);

This completes the implementation of the two-level linkage drop-down menu. It should be noted that the URL must be correct, and there must be a return value when received in the background, otherwise ajax will not execute the success method.

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/770583.htmlTechArticleThe first is the design of the database. The classification table is called cate. What I am doing is the second-level linkage of classified data. The fields required for the data are: id, name (Chinese name), pid (parent id). Setting of the parent id: If the data is not uploaded...
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to run thinkphp project How to run thinkphp project Apr 09, 2024 pm 05:33 PM

To run the ThinkPHP project, you need to: install Composer; use Composer to create the project; enter the project directory and execute php bin/console serve; visit http://localhost:8000 to view the welcome page.

There are several versions of thinkphp There are several versions of thinkphp Apr 09, 2024 pm 06:09 PM

ThinkPHP has multiple versions designed for different PHP versions. Major versions include 3.2, 5.0, 5.1, and 6.0, while minor versions are used to fix bugs and provide new features. The latest stable version is ThinkPHP 6.0.16. When choosing a version, consider the PHP version, feature requirements, and community support. It is recommended to use the latest stable version for best performance and support.

How to run thinkphp How to run thinkphp Apr 09, 2024 pm 05:39 PM

Steps to run ThinkPHP Framework locally: Download and unzip ThinkPHP Framework to a local directory. Create a virtual host (optional) pointing to the ThinkPHP root directory. Configure database connection parameters. Start the web server. Initialize the ThinkPHP application. Access the ThinkPHP application URL and run it.

How to solve the 403 error encountered by jQuery AJAX request How to solve the 403 error encountered by jQuery AJAX request Feb 20, 2024 am 10:07 AM

Title: Methods and code examples to resolve 403 errors in jQuery AJAX requests. The 403 error refers to a request that the server prohibits access to a resource. This error usually occurs because the request lacks permissions or is rejected by the server. When making jQueryAJAX requests, you sometimes encounter this situation. This article will introduce how to solve this problem and provide code examples. Solution: Check permissions: First ensure that the requested URL address is correct and verify that you have sufficient permissions to access the resource.

How to solve jQuery AJAX request 403 error How to solve jQuery AJAX request 403 error Feb 19, 2024 pm 05:55 PM

jQuery is a popular JavaScript library used to simplify client-side development. AJAX is a technology that sends asynchronous requests and interacts with the server without reloading the entire web page. However, when using jQuery to make AJAX requests, you sometimes encounter 403 errors. 403 errors are usually server-denied access errors, possibly due to security policy or permission issues. In this article, we will discuss how to resolve jQueryAJAX request encountering 403 error

Which one is better, laravel or thinkphp? Which one is better, laravel or thinkphp? Apr 09, 2024 pm 03:18 PM

Performance comparison of Laravel and ThinkPHP frameworks: ThinkPHP generally performs better than Laravel, focusing on optimization and caching. Laravel performs well, but for complex applications, ThinkPHP may be a better fit.

How to install thinkphp How to install thinkphp Apr 09, 2024 pm 05:42 PM

ThinkPHP installation steps: Prepare PHP, Composer, and MySQL environments. Create projects using Composer. Install the ThinkPHP framework and dependencies. Configure database connection. Generate application code. Launch the application and visit http://localhost:8000.

PHP and Ajax: Building an autocomplete suggestion engine PHP and Ajax: Building an autocomplete suggestion engine Jun 02, 2024 pm 08:39 PM

Build an autocomplete suggestion engine using PHP and Ajax: Server-side script: handles Ajax requests and returns suggestions (autocomplete.php). Client script: Send Ajax request and display suggestions (autocomplete.js). Practical case: Include script in HTML page and specify search-input element identifier.

See all articles