JavaScript interaction (mobile) based on HTML templates and JSON data, jsonjavascript

JavaScript interaction (mobile) based on HTML templates and JSON data, jsonjavascript

Before writing this article, I am working on a Tab-based order center:

Each time you click a TAB, a list of orders in the corresponding status is requested. In the previous project, I will use the + connector in js to connect multiple html content:

Var html = ''; html + = '<div class = "empty-list">' + '<div class = "icon-box"> </div>' + '<div> NO order </div> '+' </div> ';

It is better to have less Html content, but when there are more Html content, this method will be used again, which will be inconvenient to maintain in the future and affect the appearance and poor readability.

When I suddenly think about the PHP template, I should have something similar to the JavaScript template. In order to quickly use the project, I found it online. There are:

JavaScript Interaction Based on HTML templates and JSON data

Http://www.zhangxinxu.com/wordpress/2012/09/javascript-html-json-template/

After reading the article, it is quite simple to use:

1. Prepare an html template.

<Textarea class = "js-order-tmp" style = "display: none;"> <! -- Goods-block --> <div class = "block m-s-order"> <div class = "block-item block-news"> <a href = "<? Php echo site_url ('order/detail/'.' $ id $ ')?> "Class =" dis-block external "> <div class =" item-img ">  </div> <div class =" item-intro "> <div class =" sub-l "> <p class =" t-order-num "> order Number: $ order_num $ </p> <p class = "t-name"> recipient: $ cus_name $ </p> <p class = "t-date"> $ create_time $ </p> </div> <div class = "sub-r"> <p class = "t-expand"> <span class = "icon-right"> </span> </p> <p class = "t-flag"> $ flag_name $ </p> </div> <div class = "clear"> </div> </a> </div>/ Div> <! --/Goods-block --> </textarea> <textarea class = "js-no-order-tmp" style = "display: none;"> <! -- No order --> <div class = "empty-list"> <div class = "icon-box"> </div> <div> no orders </div> </div> <! --/No order --> </textarea>

All the variables are represented by variate.

2. The template method is simple. You can directly write an extension method based on the string prototype to ensure global availability:

String.prototype.temp = function(obj) {return this.replace(/\$\w+\$/gi, function(matchs) {var returns = obj[matchs.replace(/\$/g, "")]; return (returns + "") == "undefined"? "": returns;});}; 

It mainly uses regular expressions.

3. Prepare json data:

{"Mcm": 0, "msg": "successful", "result": [{"id": "32", "order_num": "test-001 ", "title": "test", "thumb": "http: \ // 40DA1265-40F6-D622-8BA5-04BA0AF72573.jpg", "item_id": "21", "price": "0.11 ", "cus_name": "test", "cus_tel": "10086", "cus_address": "Haidian District, Beijing", "flag": "5", "create_time ": "20160329115544", "update_time": "20160330120001", "flag_name": "canceled"}], "locate ":""}

4. Use ajax to display data

$. Progress_show ('loading in progress'); $. ajax ({url: site_url + 'api/order/getAll/'+ status, type: 'get', dataType: 'json', error: doAjax. error, success: function (response) {$. progress_hide (); if (response. MCM = '0') {var htmlList = '', htmlTemp = $ (" textarea. js-order-tmp "). val (); if (typeof response. result = 'undefined') {htmlList = $ ("textarea. js-no-order-tmp "). val ();} else {$. each (response. result, function (I, el) {htmlList + = htmlTemp. temp (el) ;}) ;}$ ('. js-status-'+ status ). empty (). append (htmlList); return true;} else {return $. alert (response. msg );}},});

Some methods are not provided here. You can understand the process and principle. Click the TAB to display the data:

The above content is a small part of the JavaScript interaction (mobile) based on HTML templates and JSON data. I hope it will help you!

Articles you may be interested in:

• ASP + template generation Word, Excel, html code
• Php Smarty template generation html document Method
• Code for interaction between JavaScript and ActionScript
• Php json format data interaction instance code details
• How to Use thinkPHP Html template labels
• Parse the interaction between webview and js in Android
• Sample Code for Variable Interaction between PHP and javascript
• Multiple methods for JS calling background methods for Data Interaction
• Form-to-grid interaction data (record) method in extjs
• C #. NET complete example of email sending using HTML templates