Example of backend asynchronous ajax Modification

Currently, many background programs use user-friendly methods to modify data. After clicking a text box, the text will be added to a text input box. When the text box loses focus, the input box will disappear and the text status will be restored, however, the text content is changed without sound. If you have used ecshop, you should be familiar with ecmall open-source programs. I have always felt that this function is very practical. The following is the ajax asynchronous content modification function extracted by the author from the open source program. I only paste some of the main points to a deeper level, you can expand it on your own.

(1) first, the html code is as follows:

<td><span class="editable" require="must" id="order143" url="http://www.phpernote.com/?action=reOrder&order_id=">465</span></td>

(2) The js Code is as follows (this part is the key code ):

$ ('Span [class = "editable"] '). click (function () {var s_value = $ (this ). text (); var s_url = $ (this ). attr ('url'); var s_id = $ (this ). attr ('id'); var require = $ (this ). attr ('require '); $ (' <input type = "text"> 'salary .css ({border: '1px solid # ccc ', width: '123', height: '20px '}). attr ({value: s_value, size: 5 }). appendTo ($ (this ). parent ()). focus (). select (). keyup (function (event) {if (event. keyCode = 13) {if (require = 'must ') {if ($ (this ). v Al (). length = 0) {alert ('the content here cannot be blank! ') ;}}$ (This ). prev ('span '). show (). text ($ (this ). attr ('value'); $. ajax ({type: 'get', url: s_url + encodeURI (s_value), cache: false, dataType: 'json', success: function (data) {if (data. code = '0') {$ ('#' + s_id ). parent (). remove (); return;} else {alert (data. alerts) ;}}); $ (this ). remove ();}). blur (function () {if (require = 'must ') {if ($ (this ). val (). length = 0) {alert ('the content here cannot be blank! ') ;}$ (This ). prev ('span '). show (). text ($ (this ). attr ('value'); $. ajax ({type: 'get', url: s_url + encodeURI (s_value), cache: false, dataType: 'json', success: function (data) {if (data. code = '0') {$ ('#' + s_id ). parent (). remove (); return;} else {alert (data. alerts) ;}}); $ (this ). remove () ;}); $ (this ). hide ();});

(3) The following is how to write a specific program to process files. I will not write any more here. The main reason is that the above key code can be understood. In fact, there is no problem.

Articles you may be interested in

• Run commands on the Linux background (run without hanging up)
• Php function for getting the first letter of Chinese characters and Pinyin (actually usable)
• ECSHOP background development module steps
• Several methods for implementing native ajax using javascript
• Performance Comparison of using in_array () foreach array_search () to find whether an array contains
• Differences between synchronous requests and asynchronous requests in http requests
• Js restrictions: Only English letters and numbers can be entered. Chinese characters and other special characters cannot be entered.
• Common Values of Cache-control include private, no-cache, max-age, and must-revalidate.