Introduce arttemplate, define Newajax send cross-domain request to get data, render the obtained data in a defined format
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Title</title>
<script src= "Js/jquery.js" ></script>
<script src= "Js/template-native.js" ></script>
<!--introducing the template engine arttemplate-->
<style>
*{
margin:0;
padding:0;
}
ul{
List-style:none;
width:700px;
margin:100px Auto;
}
UL li{
Float:left;
width:100px;
Background:skyblue;
}
</style>
<body>
<ul>
</ul>
<!--can be written as plug-ins, Ajax methods--
<script type= "Text/javascript" >
function Newajax (obj) {
var type = Obj.type | | Get ";
var dataType = Obj.datatype | | JSON ";
var url = obj.url;
var data = Obj.data | | {};
var success = obj.success;
We need to splice data into a string of a specific format
{Page:1,pagesize:10} =>page=1&pagesize=10
var datastr = "";//use DATASTR to record the results of string concatenation
for (var key in data) {
datastr+=key+ "=" +data[key]+ "&"
}
Datastr = Datastr.slice (0,-1);//Delete last one
if (datatype== "Jsonp") {
Need to have a function that does not have the same name, and to tell the background of the function, the background is generally used callback to accept the letter name
var cbname = "Newajax" + (new Date ()). GetTime () +math.random (). toString (). Slice (2);
Define this global function
Window[cbname]=function (JSON) {
Success (JSON);
NewScript.parentNode.removeChild (Newscript);
};
Tell the background of this function name and send cross-domain requests at the same time
var newscript = document.createelement ("script");
if (datastr== "") {
NEWSCRIPT.SRC = url+ "&callback=" +cbname;
}else{
NEWSCRIPT.SRC = url+ "?" +datastr+ "&callback=" +cbname;
}
Document.body.appendChild (Newscript);
}else{
var xhr = new XMLHttpRequest ();
if (type = = "Get") {
Xhr.open ("Get", url+ "?") +DATASTR);
Xhr.send (NULL);
}else if (type== "post") {
Xhr.open ("post", url);
Xhr.setrequestheader ("Content-type", "application/x-www-form-urlencoded");
Xhr.send (DATASTR);
}
Xhr.onreadystatechange=function () {
if (xhr.status==200&&xhr.readystate==4) {
var mydata = Xhr.responsetext;
MyData = Json.parse (MyData);
Success (MyData);
}
}
}
}
</script>
<script type= "Text/template" id= "Report" >
<%for (var i=0;i<content.length;i++) {%>
<li>
<p><%=content[i].date%></p>
<p><%=content[i].temperature%></p>
<p><%=content[i].weather%></p>
<p><%=content[i].wind%></p>
</li>
<%}%>
</script>
<script>
Newajax ({
DataType: "Jsonp",
URL: "http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key= 20dcd5d3bbae617403e1cd5118a93b36 ",
Success:function (JSON) {
var json = json.result.future;
var data = {Content:json};
var html = template ("Report", data);
The template object is the object used by Arttemplate in JS to manipulate templates, the first parameter is the ID of the template, which is used to specify which module//board This operation is, and the second is the parameter to put into the template
$ ("ul"). Append (HTML);
}
});
</script>
</body>
Populating duplicate DOM elements with the template engine
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
