ThinkPHP and Ajax realize secondary linkage drop-down menu

不言
Release: 2023-03-30 12:48:02
Original
2224 people have browsed it

This article mainly introduces the drop-down menu for secondary linkage between ThinkPHP and Ajax. It has certain reference value. Now I share it with you. Friends in need can refer to the data existence of

linkage menu. In the database, the menu data can be changed at any time by adding, deleting, modifying, or modifying the database without modifying the code. At the same time, after achieving level 2, level 3 and level 4 can also be achieved. . . Wait for the related menu

The 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).

Parent id Settings: 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 get 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 标签: Copy after loginAjax code:$('#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"+data[i].ca_name+""; } $("#lables").append(b); } }); }); } );Copy after loginThe Ajax code is triggered after the first layer type is changed. The main parameters of the ajax method are1 .url: The address for receiving ajax in the background;2.data: The data passed to the background is usually passed in json; what is passed here is the id value of the selected class.3.type: transfer method, there are get and post methods, I usually use post, which can transmit more data than get, and is more secure;4.error: ajax execution Failure method;5.success: The method for successful ajax execution, which is the callback function. When executing success here, I first use empty() to clear the contents of the second drop-down menu, and then output the data obtained from the background.The following is the page where Thinkphp receives and processes ajax data.//后台ajax验证 $result = array(); $cate =$_POST['type']; $result = M('cate')->where(array('ca_pid'=> $cate))->field('ca_id,ca_name')->select(); $this->ajaxReturn($result,"JSON");Copy after loginThinkphp's I() method can actually be regarded as $_POST[], so as to obtain the first layer selection passed by ajax. The id of the content, then, obtain its subclass, and then use ajaxReturn() to return it to ajax. Here, the return data is set in json form, so ajax will receive the data in json formNative PHP return data method :The code is as follows://搜索结果为$result ..... echo json_encode($result);Copy after loginThis 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 The success method will not be executed.The above is the entire content of this article. Thank you everyone for reading. Please pay attention to the PHP Chinese website for more content!Related recommendations:Real-time message push function implemented in PHP [based on anti-ajax push]In How to use ajax to implement refresh-free paging in ThinkphpThe above is the detailed content of ThinkPHP and Ajax realize secondary linkage drop-down menu. For more information, please follow other related articles on the PHP Chinese website!Related labels:ajaxthinkphpsource:php.cnPrevious article:PHP image file operation encapsulation classNext article:Basic knowledge and application of PHP design patternsStatement of this WebsiteThe 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.cnLatest Articles by AuthorWhat is programming?2019-04-16 16:04:28The shortcut key for search is the ctrl key plus what key2020-09-15 11:26:00What is added to the cut shortcut key ctrl?2020-09-10 14:26:14What is it's profession?2020-09-08 11:06:15What does ctrl plus save?2020-09-09 09:46:36What is the shortcut key for ctrl+t?2020-10-12 14:51:04How to use PS ruler?2020-09-10 14:40:02Who is suitable for learning programming?2019-04-24 16:20:55What is the shortcut key for reverse selection in PS?2020-10-13 11:40:03How to add line break between two inline elements2019-04-15 14:06:21Latest IssuesWhat should I do if the download fails when installing workman through composer? There is also an error when downloading other plug-ins.D:\phpstudy_pro\WWW\tpShop\thinkphp>composer require topthink/think-worker=2.0.*./compo...From 2023-08-25 17:04:1800131How to close the current page when downloading a fileUse thinkphp to download successfully. Then it stays on this page. How can I close the cur...From 2023-05-08 21:54:2902376How to make thinkphp run in XAMPP environment? ?I searched a lot on the Internet and couldn't understand it. This website doesn't seem to ...From 2023-05-02 20:43:3903346thinkphp error when inserting date type datathinkphp error when inserting date type data: Invalid datetime format: 1292 Incorrect date...From 2023-03-18 06:44:1001335thinkphp paging ranking field sorting problem$model->order('ranking', 'asc')->page($page, $limit)->select()->toArray(); I n...From 2022-10-26 17:03:5100315Related TopicsMore>ajax tutorialAjax Chinese garbled code solutionWhat to do if ajax transmits Chinese garbled charactersWhich one is easier, thinkphp or laravel?How is the performance of thinkphp?How to set textarea read-onlybusyboxv1.30.1 cannot bootWhat is the MetaversePopular RecommendationsHow to set up hosts on Mac computer (steps with pictures and text)Quickly build a simple QQ robot with PHPAPI common signature verification methods (PHP implementation)Collection of common date and time operations in PHPPHP generates graphic verification code (enhanced interference type)Popular TutorialsMore>Related TutorialsPopular RecommendationsLatest coursesThe latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)1402090PHP introductory tutorial one: Learn PHP in one week4226605JAVA Beginner's Video Tutorial2408931Little Turtle's zero-based introduction to learning Python video tutorial497239PHP zero-based introductory tutorial832515The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)1402090 times of learningJAVA Beginner's Video Tutorial2408931 times of learningLittle Turtle's zero-based introduction to learning Python video tutorial497239 times of learningQuick introduction to web front-end development214087 times of learningMaster PS video tutorials from scratch856157 times of learning[Web front-end] Node.js quick start4467 times of learningComplete collection of foreign web development full-stack courses3510 times of learningGo language practical GraphQL3025 times of learning550W fan master learns JavaScript from scratch step by step552 times of learningPython master Mosh, a beginner with zero basic knowledge can get started in 6 hours15579 times of learningLatest DownloadsMore>Web EffectsWebsite Source CodeWebsite MaterialsFront End Template[form button] jQuery enterprise message form contact code[Player special effects] HTML5 MP3 music box playback effects[Menu navigation] HTML5 cool particle animation navigation menu special effects[form button] jQuery visual form drag and drop editing code[Player special effects] VUE.JS imitation Kugou music player code[html5 special effects] Classic html5 pushing box game[Picture special effects] jQuery scrolling to add or reduce image effects[Photo album effects] CSS3 personal album cover hover zoom effect[Front-end template] Home Decor Cleaning and Repair Service Company Website Template[Front-end template] Fresh color personal resume guide page template[Front-end template] Designer Creative Job Resume Web Template[Front-end template] Modern engineering construction company website template[Front-end template] Responsive HTML5 template for educational service institutions[Front-end template] Online e-book store mall website template[Front-end template] IT technology solves Internet company website template[Front-end template] Purple style foreign exchange trading service website template[PNG material] Cute summer elements vector material (EPS PNG)[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)[PNG material] Golden graduation cap vector material (EPS PNG)[PNG material] Black and white style mountain icon vector material (EPS PNG)[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses[banner picture] Flat style Arbor Day banner vector material (AI+EPS)[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)[Front-end template] Home Decor Cleaning and Repair Service Company Website Template[Front-end template] Fresh color personal resume guide page template[Front-end template] Designer Creative Job Resume Web Template[Front-end template] Modern engineering construction company website template[Front-end template] Responsive HTML5 template for educational service institutions[Front-end template] Online e-book store mall website template[Front-end template] IT technology solves Internet company website template[Front-end template] Purple style foreign exchange trading service website templateAbout usDisclaimerSitemapphp.cn:Public welfare online PHP training,Help PHP learners grow quickly!