h5兼容ie8
2019-05-06 本文已影响0人
__笑我一世沉沦丶
1、使用json时需要格式化
2、ajax请求数据,传递json时，data中的数据需要使用json字符串
$.ajax({
url:ip+'/sys/login',
data:'{"username":"cs","password":"123456"}',
type:'post',
async:false,
contentType : "application/json",
jsonp: "callback",
success:function(res){
}
})
3、页面跳转
window.location.href='...'
接收参数。‘planId’和‘storeId’即为window.location.href传递的参数字符串
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
//return decodeURI(r[2]); //解决中文乱码问题
}
}
var planId = getQueryString('planId')
var storeId = getQueryString('storeId')
4、获取路由query
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
//return decodeURI(r[2]); //解决中文乱码问题
}
}
5、兼容json.stringfy()方法
在页面中引入以下代码，即可兼容该方法
if (!window.JSON) {
window.JSON = {
parse: function(jsonStr) {
return eval('(' + jsonStr + ')');
},
stringify: function(jsonObj) {
var result = '',
curVal;
if (jsonObj === null) {
return String(jsonObj);
}
switch (typeof jsonObj) {
case 'number':
case 'boolean':
return String(jsonObj);
case 'string':
return '"' + jsonObj + '"';
case 'undefined':
case 'function':
return undefined;
}
switch (Object.prototype.toString.call(jsonObj)) {
case '[object Array]':
result += '[';
for (var i = 0, len = jsonObj.length; i < len; i++) {
curVal = JSON.stringify(jsonObj[i]);
result += (curVal === undefined ? null : curVal) + ",";
}
if (result !== '[') {
result = result.slice(0, -1);
}
result += ']';
return result;
case '[object Date]':
return '"' + (jsonObj.toJSON ? jsonObj.toJSON() : jsonObj.toString()) + '"';
case '[object RegExp]':
return "{}";
case '[object Object]':
result += '{';
for (i in jsonObj) {
if (jsonObj.hasOwnProperty(i)) {
curVal = JSON.stringify(jsonObj[i]);
if (curVal !== undefined) {
result += '"' + i + '":' +curVal + ',';
}
}
}
if (result !== '{') {
result = result.slice(0, -1);
}
result += '}';
return result;
case '[object String]':
return '"' + jsonObj.toString() + '"';
case '[object Number]':
case '[object Boolean]':
return jsonObj.toString();
}
}
};
}
6、underscore模板
<% %> => 写函数表达式
<%= %> => 写函数值
<%- %> => 在元素对象上写一些参数
<div id='app'></div>
<script type='text/html' id='tpl1'>
<table class="table table-striped table-bordered">
<% for(var n=0 ; n<data.taskList.length; n++){ %>
<tr>
<% var item2 = data.taskList[n] %>
<td><%= n+1 %></td>
<td><%= item2.taskType %></td>
<td><%= item2.createTime %></td>
<td><%= item2.taskState %></td>
<td><%= item2.updateTime %></td>
<td><%= item2.abnormalType %></td>
<td>
<button class="hbtn" type="button" onclick="check2(<%- n %>)">查看</button>
</td>
</tr>
<% } %>
</table>
</script>
<script>
var data = {}
var factory = $('#app');
var tpl1 = $('#tpl1').html();
var render = _.template(tpl1);
</script>
递归渲染，实现树状图效果：
<script type='text/html' id='tpl1'>
<ul class="tree">
<% function fnn1(data){ %>
<% if(data.length){ %>
<ul>
<% if(data.isDown){ %>
<% for(var i=0 ; i<data.length; i++){ %>
<% var item = data %>
<% if(item[i].list){ %>
<li>
<img onclick="fr1(<%- item[i].orgId %>)" class="down" src="<%- item[i].imgDown?'image/right.png':'image/down.png' %>" alt="">
<a href="#" onclick="fr2(<%- item[i].orgId %>)"><%= item[i].name %></a>
</li>
<% fnn1(item[i].list) %>
<% %>
<% } %>
<% } %>
<% } %>
</ul>
<% } %>
<% } %>
<% fnn1(data.treeData) %>
</ul>
</script>
<script>
var data = {
"tableTitle1": [
"门店编号",
"门店名称",
"任务数",
"待处理任务",
"操作"
],
"tabledata1": [ ],
"stat": { },
"treeData": [ ],
"tabledata2":[ ]
}
var factory = $('#app');
var tpl1 = $('#tpl1').html();
var render = _.template(tpl1);
jQuery.support.cors = true;
function fr1(id){
function ff(data) {
if (data.length) {
for (var i = 0; i < data.length; i++) {
var item = data
if (item[i].orgId===id) {
item[i].list.isDown = !item[i].list.isDown;
item[i].imgDown = !item[i].imgDown
var html = render(data);
factory.html(html);
}else{
ff(item[i].list)
}
}
}
return data
}
ff(data.treeData)
}
function fr2(id) {
$.ajax({
url:ip+'/abnormal/checkplan/all/'+id,
type:'get',
jsonp: "callback",
headers:{
"token":token
},
success:function (res) {
data.tabledata2 = res.nPList;
var html = render(data);
factory.html(html);
},
error:function (err) {
}
})
}
$.ajax({
url:ip+'/sys/login',
data:'{"username":"cs","password":"123456"}',
type:'post',
async:false,
contentType : "application/json",
jsonp: "callback",
success:function (res) {
if(res.code===0){
token=res.token;
$.ajax({
url:ip+'/abnormal/checkplan/today',
type:'get',
jsonp: "callback",
headers:{
"token":token
},
success:function (res) {
data.tabledata1 = res.nPList;
var html = render(data);
factory.html(html);
},
error:function (err) {
}
})
$.ajax({
url:ip+'/abnormal/checkplan/stat',
type:'get',
headers:{
"token":token
},
success:function (res) {
data.stat = res.taskNum
var html = render(data);
factory.html(html);
}
})
$.ajax({
url:ip+'/sys/org/all',
type:'get',
headers:{
"token":token
},
success:function (res) {
var arr = res.orgList;
// data.treeData = res.orgList;
function fnn1(data) {
if (data.length) {
for (var i = 0; i < data.length; i++) {
var item = data
if (item[i].list.length) {
item[i].imgDown = true
fnn1(item[i].list)
}else{
item[i].imgDown = false
}
}
data.isDown = false;
}
return data
}
var df = fnn1(arr)
df.isDown = true
data.treeData = df;
var html = render(data);
factory.html(html);
}
})
$.ajax({
url:ip+'/abnormal/checkplan/all/0',
type:'get',
jsonp: "callback",
headers:{
"token":token
},
success:function (res) {
data.tabledata2 = res.nPList;
var html = render(data);
factory.html(html);
},
error:function (err) {
}
})
}
},
error:function (err) {
}
})
</script>
