Easyui异步加载tree的问题解析,jquery库文件略庞大
分类:关于美高梅

jquery库文件略庞大,在某些情况下,需要尽量减少加载的文件(文件大小),需要用纯js来编写效果

      以前习惯于用php正则匹配内容来获取网页中的数据,但发现读入的整个文件并没有我需要的信息,在网页中有一部分信息是用js来动态加载的,这部分数据就无法获取了,此时可以通过分析页面发送的请求来尝试是否能获取到下需要的内容。通过分析票务网站的内容发现js文件请求了这个地址http://search.t3.com.cn/queryJsonItem?pagesize=9&curpage=1&order=5&ttb=1&ci=11&callback=$.modelParse_search_result_0 打开这个页面发现了如下内容

想要实现从本地中加载json文件,通过事件来动态的插入到ul中时,遇到了一小bug

上一篇文章写到原生js取代jquery的一些常用函数:原生js仿jquery一些常用方法,那么,ajax如何实现呢?如下是一个比较完整的ajax()

$('#layer')
document.getElementById('layer')

$('#layer span')
var layer = document.getElementById('layer');
var span = layer.getElementsByTagName('span');

$('#inner').parent()
document.getElementById("inner").parentNode

$(window).width();
document.body.clientWidth

$('#layer').width();
document.getElementById('layer').style.width

$('#wrap').append('a');
var span=document.createElement("span");
span.innerHTML='a';
document.getElementById("wrap").appendChild(span);

$('#wrap span').remove();
deleteSpan();
function deleteSpan(){
var content=document.getElementById("wrap");
var childs=content.getElementsByTagName("span");
if(childs.length > 0){
content.removeChild(childs[childs.length-1]);
deleteSpan();
}
}

$('#wrap').css({'left':'100px'});
var wrap = document.getElementById('wrap');
wrap.style.left = '100px';

$('#banner').hide();
document.getElementById('banner').style.display = 'none';

$('#banner').show();
document.getElementById('banner').style.display = 'block';

$('#people').addClass('people_run2');
document.getElementById("people").classList.add('people_run2');

$('#people').removeClass('people_run1');
document.getElementById("people").classList.remove('people_run1');

$('#number').text(1);
document.getElementById('number').innerHTML = 1;


$.ajax({ 
type: "POST", 
url: 'run.php', 
data: 's='+last_step, 
dataType:"JSON", 
timeout: 2000, 
success: function(data){ 
//处理回调 
} 
}); 

//1.创建XMLHTTPRequest对象 
var xmlhttp; 
if (window.XMLHttpRequest) { 
//IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp = new XMLHttpRequest; 

//针对某些特定版本的mozillar浏览器的bug进行修正 
if (xmlhttp.overrideMimeType) { 
xmlhttp.overrideMimeType('text/xml'); 
}; 
} else if (window.ActiveXObject){ 
//IE6, IE5 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
}; 

if(xmlhttp.upload){ 
//2.回调函数 
//onreadystatechange是每次 readyState 属性改变的时候调用的事件句柄函数 
xmlhttp.onreadystatechange = function(e){ 
if(xmlhttp.readyState==4){ 
if(xmlhttp.status==200){ 
var json = eval('(' + xmlhttp.responseText + ')'); 
//处理回调 
} 
} 
}; 

//3.设置连接信息 
//初始化HTTP请求参数,但是并不发送请求。 
//第一个参数连接方式,第二是url地址,第三个true是异步连接,默认是异步 
//使用post方式发送数据 
xmlhttp.open("POST","/run.php",true); 

//4.发送数据,开始和服务器进行交互 
//发送 HTTP 请求,使用传递给 open() 方法的参数,以及传递给该方法的可选请求中如果true, send这句话会立即执行 
//如果是false(同步),send会在服务器数据回来才执行 
//get方法在send中不需要内容 
var formdata = new FormData(); 
formdata.append("s", last_step); 
xmlhttp.send(formdata); 
}


$('btn').bind({
'touchstart':function(){
}
});
document.getElementById("btn").ontouchstart = function(){
};

美高梅网址 1

html中代码是这样的

function ajax(){ 
  var ajaxData = { 
    type:arguments[0].type || "GET", 
    url:arguments[0].url || "", 
    async:arguments[0].async || "true", 
    data:arguments[0].data || null, 
    dataType:arguments[0].dataType || "text", 
    contentType:arguments[0].contentType || "application/x-www-form-urlencoded", 
    beforeSend:arguments[0].beforeSend || function(){}, 
    success:arguments[0].success || function(){}, 
    error:arguments[0].error || function(){} 
  } 
  ajaxData.beforeSend() 
  var xhr = createxmlHttpRequest();  
  xhr.responseType=ajaxData.dataType; 
  xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);  
  xhr.setRequestHeader("Content-Type",ajaxData.contentType);  
  xhr.send(convertData(ajaxData.data));  
  xhr.onreadystatechange = function() {  
    if (xhr.readyState == 4) {  
      if(xhr.status == 200){ 
        ajaxData.success(xhr.response) 
      }else{ 
        ajaxData.error() 
      }  
    } 
  }  
} 

function createxmlHttpRequest() {  
  if (window.ActiveXObject) {  
    return new ActiveXObject("Microsoft.XMLHTTP");  
  } else if (window.XMLHttpRequest) {  
    return new XMLHttpRequest();  
  }  
} 

function convertData(data){ 
  if( typeof data === 'object' ){ 
    var convertResult = "" ;  
    for(var c in data){  
      convertResult+= c + "=" + data[c] + "&";  
    }  
    convertResult=convertResult.substring(0,convertResult.length-1) 
    return convertResult; 
  }else{ 
    return data; 
  } 
} 

您可能感兴趣的文章:

  • 使用jquery动态加载js文件的方法
  • jQuery异步获取json数据方法汇总
  • JQuery遍历json数组的3种方法
  • jquery动态加载js/css文件方法(自写小函数)
  • jquery和js实现对div的隐藏和显示方法
  • jquery mobile页面跳转后样式丢失js失效的解决方法
  • js/jquery判断浏览器的方法小结
  • 原生js实现复制对象、扩展对象 类似jquery中的extend()方法
  • Jquery+asp.net后台数据传到前台js进行解析的方法
  • js实现jquery的offset()方法实例

 这个json对象 里面保存了我需要的信息 只要能读取到这个json对象就可以把需要的内容哪下来 搜索了一下 jquery的ajax方法可以实现

<ul class="easyui-tree" id="tt"></ul>

使用格式跟jquery的ajax差不多:

    $.getJSON("
                
          });

js中的代码

ajax({ 
  type:"POST", 
  url:"ajax.php", 
  dataType:"json", 
  data:{"val1":"abc","val2":123,"val3":"456"}, 
  beforeSend:function(){ 
    //some js code 
  }, 
  success:function(msg){ 
    console.log(msg) 
  }, 
  error:function(){ 
    console.log("error") 
  } 
}) 

说明:前面的是url 最后的callback=?表示回调函数 result表示回调的结果(就是上面的json对象),这样我就能拿到我需要的内容了 。

$(".next-menu:nth-child(1) a").click(function() {
var $IDstr = $(this).attr("id"),
$treeIDNum = parseInt($(this).attr("treeID")),
jsonURL = "json/" + $IDstr + ".json",
node;
addAttr2Tree(jsonURL);
changeImgSrc($treeIDNum); 
});
});
function changeImgSrc(nodeID){
var node = $("#tt").tree('find', nodeID);
if(node){
$("#tt").tree('select', node.target);
}
if (node.attributes) {
$("#img-box").attr("src", node.attributes.url);
}
}
function addAttr2Tree(URL){
$("#tt").tree({
url: URL,
method: "get",
animate: true,
lines: true
});
}

以上就是小编为大家带来的原生js实现ajax方法(超简单)的全部内容了,希望对大家有所帮助,多多支持脚本之家~

 

起初是想通过一个按钮的点击事件来动态的加载tree的内容就是如上代码,addAttr2Tree 是用来将点击按钮时对应的本地json数据加到html中的ul标签中, changeImgSrc 是对tree节点的一些选中操作以及图片的加载,但是无论怎么调试,总是会出现一条错误

您可能感兴趣的文章:

  • javascript实现原生ajax的几种方法介绍
  • 详谈 Jquery Ajax异步处理Json数据.
  • AJAX跨域请求json数据的实现方法
  • 用ajax动态加载需要的js文件
  • 原生 JS Ajax,GET和POST 请求实例代码
  • js每隔5分钟执行一次ajax请求的实现方法
  • JavaScript读二进制文件并用ajax传输二进制流的方法
  • js实现简单实用的AJAX完整实例
  • ajax的json传值方式在jsp页面中的应用
  • 纯js封装的ajax功能函数与用法示例

补充:php对json的解析

美高梅网址 2美高梅网址, 

        php 对json的解析使用到了两个函数

无法获取attributes属性!!!我反复确认attributes是完整无缺的放在json文件里的而且总是第一次点击按钮时才会出现这种错误,第二次及其以后,这种错误是没有的

        json_encode(参数)  在php端将内容解析为json对象

后来我就想到,是不是因为json数据动态加载的速度比不上程序代码执行的速度?!

        json_decode(参数) 将json对象解析为php数组

果然不出我所料!easyui中tree自带了一个方法onLoadSuccess 当数据成功加载时,才会执行一些操作
所以

 

$(".next-menu:nth-child(1) a").click(function() {
var $IDstr = $(this).attr("id"),
$treeIDNum = parseInt($(this).attr("treeID")),
jsonURL = "json/" + $IDstr + ".json",
node;
addAttr2Tree(jsonURL);
$("#tt").tree({
onLoadSuccess: function(){
changeImgSrc($treeIDNum);
}
});
});

 

代码改成这样就可以了。

 

以上所述是小编给大家介绍的jQuery Easyui异步加载tree的问题解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • jQuery按需加载轮播图(web前端性能优化)
  • jquery使用EasyUI Tree异步加载JSON数据(生成树)
  • 如何解决jQuery EasyUI 已打开Tab重新加载问题
  • jQuery生成假加载动画效果
  • jquery加载页面的方法(页面加载完成就执行)
  • jquery.lazyload 实现图片延迟加载jquery插件
  • Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
  • jQuery页面加载初始化常用的三种方法
  • jquery实现页面加载效果
  • 详解jQuery lazyload 懒加载

本文由美高梅网址发布于关于美高梅,转载请注明出处:Easyui异步加载tree的问题解析,jquery库文件略庞大

上一篇:原生js结合html5制作小飞龙的简易跳球,Canvas绘制 下一篇:js安装教程和NPM包管理器使用详解,npm常用命令详
猜你喜欢
热门排行
精彩图文