JS——Ajax原理应用（三个案例）

最新推荐文章于 2022-03-22 13:04:52 发布

weixin_30776545

最新推荐文章于 2022-03-22 13:04:52 发布

阅读量209

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/ytraister/p/11003798.html

版权

案例一（请求并显示静态txt文件）：

如上图，首先在本地服务器wamp下的www文档中存储3个txt格式的文档，用于保存等会需要调用的文档内容（图示1）；

接着（图示2）用于编写js和网页的代码；

最后（图示3）事先准备好上一节内容自己编写的ajax代码。稍后需要调用。

运行结果如下图所示：

js代码如下：

 1 <script src="ajax.js"></script>     <!--调用外部事先编写好的ajax.js文件-->
 2 <script>
 3 　　window.οnlοad=function(){
 4 　　　　var oDiv=document.getElementById('div');
 5 　　　　var aBtn=document.getElementsByTagName('input');
 6 
 7 　　　　for(var i=0;i<aBtn.length;i++){     //给按钮做循环
 8 　　　　　　aBtn[i].index=i;
 9 　　　　　　aBtn[i].οnclick=function(){     //点击按钮，触发Ajax(url,fnSucc,fnFaild)调用方法
10 　　　　　　　　Ajax((this.index+1)+'.txt',function(str){
11 　　　　　　　　　　//点击某个按钮，对应某个文档    把文档中的内容添加到div中
12 　　　　　　　　　　oDiv.innerHTML=str;
13             　})
14 　　　　　　}
15 　　　　}
16 　　}
17 </script>

案例二（动态数据：请求json文件）：

如上图，新增了ajax.json文件，而且等会js代码中将会获取json文件里的内容

运行效果如下图所示：

js代码如下：

 1 <script src="ajax.js"></script>     <!--调用外部的ajax.js文件-->    
 2 <script>
 3 　　window.οnlοad=function(){
 4 　　　　var oBtn=document.getElementById('btn');
 5 
 6 　　　　oBtn.οnclick=function(){                //点击按钮，触发Ajax(url,fnSucc,fnFaild)调用方法    
 7 　　　　　　Ajax('ajax.json',function(str){     //str里面所存储的是字符串形式
 8 　　　　　　　　var arr=eval(str);              //需要用eval()方法来处理
 9 　　　　　　　　alert('输出json中第一个数组的a和b的值：'+arr[0].a+','+arr[0].b); 
10 　　　　　　　　alert('输出json中第二个数组的a和b的值：'+arr[1].a+','+arr[1].b); 
11 　　　　　　});
12 　　　　}
13 　　}
14 </script>

关于evla()方法的讲解：

定义和用法：

eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。

如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。

【概括：eval就是计算字符串里的值】

案例三（分页案例）：

如上图，备注aaa的三个文档，分别存了user和pass的内容，Ajax.html文档用于以分页的形式分别输出三个文档中的内容

效果图如下：

代码如下：

 1 <script src="ajax.js"></script>     <!--调用外部的ajax.js文件-->    
 2 <script>
 3 window.onload=function(){
 4 　　var oUl=document.getElementById('ul');
 5 　　var aBtn=document.getElementsByTagName('a');
 6 
 7 　　for(var i=0;i<aBtn.length;i++){
 8 　　　　aBtn[i].index=i;
 9 　　　　aBtn[i].onclick=function(){
10 　　　　　　Ajax('aaa'+(this.index+1)+'.txt',function(str){
11 　　　　　　　　var arr=eval(str);                  //str里面所存储的是字符串形式
12 
13 　　　　　　　　oUl.innerHTML='';                   //让ul的值为空，实现分页效果！！！（最后一步）
14 
15 　　　　　　　　for(var i=0;i<arr.length;i++){      //循环arr中的内容
16 　　　　　　　　　　var oLi=document.createElement('li');   //创建li用于存储循环的内容
17 　　　　　　　　　　oLi.innerHTML='<strong>'+arr[i].user+'</strong>'+'<i>'+arr[i].pass+'</i>';
18 　　　　　　　　　　　　//获取arr中的user和pass数据，并存储在li中
19 　　　　　　　　　　oUl.appendChild(oLi);           //把li所得到的内容加到ul中
20 　　　　　　　　}
21 　　　　　　});
22 　　　　}
23 　　}
24 }
25 </script>
26 </head>
27 <body>
28 分页选项
29 </br>
30 <a href="javascript:;">1</a>
31<a href="javascript:;">2</a>
32 <a href="javascript:;">3</a>
33 <ul id="ul"></ul>
34 </body>

转载于:https://www.cnblogs.com/ytraister/p/11003798.html

weixin_30776545

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS——Ajax原理应用（三个案例）

案例一（请求并显示静态txt文件）：如上图，首先在本地服务器wamp下的www文档中存储3个txt格式的文档，用于保存等会需要调用的文档内容（图示1）；接着（图示2）用于编写js和网页的代码；最后（图示3）事先准备好上一节内容自己编写的ajax代码。稍后需要调用。运行结果如下图所示：js代码如下： 1 <script src="ajax.js"...
复制链接

扫一扫