Shulou(Shulou.com)06/02 Report--

This article shows you how to use Jquery+Ajax+PHP+MySQL to achieve classified list management, the content is concise and easy to understand, absolutely can make your eyes bright, through the detailed introduction of this article, I hope you can get something.

The front-end page communicates with the background through ajax and responds to the front-end page interaction according to the background processing result, which is a typical example of Ajax and JSON applications.

Edit item operation

By clicking the "Edit" button, the corresponding item will immediately become edited, an input box appears, and the user can re-enter the new content, and then click the "Save" button to complete the editing operation. You can also click the "cancel" button to cancel the editing state.

First, implement the editing state by clicking the "edit" button, adding the following code to the $(function () {...}) of global.js:

/ / Editing option $(".edit") .live ('click',function () {$(this) .removeClass (' edit'). AddClass ('oks'). Attr (' title',' Save'); $(this). Prev (). RemoveClass ('del'). AddClass (' cancer'). Attr ('title',' cancel'); var str = $(this). Parent (). Text (); var input = "; $(this). Next (). WrapInner (input);})

As can be seen from the code, it is actually changing the class style of the "Edit" button and "Delete" button, modifying its title property, and then wrapping the category name with an input input box (wrapInner), thus generating an editing state.

To submit the modified content to the background for processing, the following occurs by clicking the Save button. Look at the code:

/ / Editing processing $(".oks") .live ('click',function () {var input_str= $(this). Parent (). Find (' input'). Val (); if (input_str== ") {jNotify (" enter category name! "); return false;} var str= escape (input_str); var id = $(this). Parent (). Attr (" rel "); var URL =" post.php?action=edit "; var btn = $(this) $.ajax ({type: "POST", url: URL, data: "title=" + str+ "& id=" + id, success: function (msg) {if (msg==1) {jSuccess ("Editing successful!"); var strs = "+ input_str+"; btn.parent (). Html (strs);} else {jNotify ("Operation failed!"); return false;});})

By clicking the "Save" button in the editing state, we first get the contents of the input box, prompt the user to enter the content if nothing is entered, then encode the content entered by the user with escape, and at the same time obtain the ID corresponding to the editing item, submit the input and ID as parameters to the background post.php for processing through $.ajax, and respond to the information returned by the background. If returned successfully, The user is prompted to "edit successfully" and the editing status is released, and if the return fails, the user is prompted "the operation failed".

The operation of editing items handled by the background post.php is similar to that of the new items in the previous section, and the code is as follows:

Case 'edit': / / Editing item $id= $_ POST [' id']; $title= uniDecode ($_ POST ['title'],' utf-8'); $title= htmlspecialchars ($title,ENT_QUOTES); $query = mysql_query ("update catalist set title='$title' where cid='$id'"); if ($query) {echo '1clients;} else {echo' 2customers;} break

The above code snippet is added to the switch statement of post.php. The code receives the id and title parameters from the front end, decodes the title parameters, then updates the corresponding items in the data table, and outputs the execution results to the foreground for processing.

To cancel the editing status, execute the following code by clicking cancel:

/ / cancel editing $(".cancer") .live ('click',function () {var li = $(this). Parent (). Html (); var str_1 = $(this). Parent (). Find (' input'). Val (); var strs = "+ str_1+"; $(this). Parent (). Html (strs);})

In fact, the code reassembles a string and replaces the assembled string for the editing state, that is, canceling the editing state.

Through such a practical application case, we can experience the advantages of front-end technology, every step that users complete is so friendly, which is an aspect of user experience. The Jquery library makes ajax operations so easy, and the live method of jquery is used in the code, which is necessary to bind to dynamically create DOM elements. In addition, there is no mention of the repeatability of validating the input class table, which requires background verification. Readers can write a piece of verification code on their own. Finally, by the way, wouldn't it be more perfect if a drag sorting function was added to this example? On the implementation of drag sorting, xuebuyuan.com also has relevant examples to explain, readers can be familiar with first. I will bring you this delicious meal later. Please stay tuned.

The above content is how to use Jquery+Ajax+PHP+MySQL to achieve classified list management, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.