Usually we use AJAX to request the completion of data after the process is often a rendering of data, at the beginning of my practice is to do a data template in the HTML interface, using some similar to the angular tag, and then use the Replace function to replace those marked as real data, Later, a more concise approach was found in the learning process. This method uses the method of capturing arrays in regular expressions, which is perfect for rendering data.
var regexp = /(?: \ {\{) ([a-za-z][^\s\}]+) (?:\} \})/g
Function render (template, data) {
return Template.replace (Regexp, function (fullmatch, capture) { if (Data[capture]) { return data[capture]; } else { return fullMatch; } }); }
Window.rendertemplate = render;
The core code, like the one we define here, matches the data in {{}}, and the Render method passes two parameters, one is the template, the other is the data to be rendered, such as the DOM structure of the template we define as <TABLE><TR><TD >{{aa}}</td></tr></table>, the return data is JSON, also contains {AA: "real Value"}, then we call the end of Render (Template,data) After getting a template with real data, you can try it. If the project is small, try to write your own rendering template.
Front-end-"learning experience"-a simple way to render templates