Jquery + Ajax + PHP + MySQL implement classification list management (bottom) _ jquery

This article uses Jquery + Ajax + PHP + MySQL to manage a customer classification list. how can we use Ajax and Json technology to make it easier for users to operate, if you are interested, refer to the previous article. we have explained in detail how to add and delete list management operations. we can see that the front-end page communicates with the background through ajax, response to Frontend Page interaction based on background processing results. this is a typical example of Ajax and JSON applications.
This article will continue with the examples in the previous article to complete the editing operation.
Edit item operation
By clicking the "Edit" button, the corresponding item changes to the editing status immediately. an input box is displayed. you can re-enter the new content and click "save" to complete the editing operation, you can also click the cancel button to cancel the editing status.
First, click the "Edit" button to edit the status. add the following code to $ (function () {...}) of global. js:

// Edit 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 );});

The code shows that the class style of the "Edit" button and "delete" button is actually changed, and its title attribute is modified, then, wrap the category name in an input box (wrapInner) to generate an editing status.
To submit the modified content to the backend for processing, click "save" to see the following code:

// Edit processing $ (". oks "). live ('click', function () {var input_str = $ (this ). parent (). find ('input '). val (); if (input_str = "") {jNotify ("Enter the 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 ("edited successfully! "); Var strs =" "+ input_str +"; btn.parent().html (strs);} else {jNotify ("Operation failed! "); Return false ;}}});});

Click the "save" button in the editing status to get the content of the input box first. If no content is entered, the system prompts the user to enter the content, and then encodes the content entered by the user, at the same time, you also need to get the ID corresponding to the edit item, and use the input content and ID as the parameter through $. ajax is submitted to the background post. php processes and responds to the information returned by the background. if the return result is successful, the system prompts the user to "edit succeeded" and unedit the status. if the return result fails, the system prompts the user "operation failed ".
The operations for processing and editing items in the background post. php are similar to those for adding items in the previous article. the code is as follows:

Case 'edit': // edit 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 '1 ';} else {echo '2';} break;

The above code snippet is added to post. in the switch statement of php, the code receives the id and title parameters sent from the front end, decodes the title parameter, updates the corresponding items in the data table, and outputs the execution result to the foreground for processing.
To cancel the editing status, Click Cancel to execute the following code:

// Cancel editing $ (". cancer "). live ('click', function () {var li = ↑ (this%.parent().html (); var str_1 = $ (this ). parent (). find ('input '). val (); var strs = "" + str_1 + ""; values (this).parent().html (strs );});

In fact, the code re-assembles a string and re-assembles the string to replace the edit state, that is, the edit state is canceled.
Through such a practical application case, we can experience the superiority of the front-end technology. each step of the user's operation is so friendly, which is an aspect of the user experience. The Jquery library makes ajax operations so simple. The jquery live method is also used in the code in this article, which is required to bind a dynamic DOM element.

The above two articles are all the content about how Jquery + Ajax + PHP + MySQL implements category list management. I hope it will help you learn.