ajax 中after(), insertAfter(), before(), insertBefore()等用法

之前一直写后台，对ajax不是特别熟悉。只是知道有这么个牛逼的东西。最近看了下，实现了几个简单的功能。记录下来。

下载jquery。在html文件中导入。

ajax可以减少服务器的流量。减轻前端的压力。反正优点多多。

 1 <script type="text/javascript">
 2 　　function getfiles(dirnames){   // dirnames是django传过来的参数。
 3           $.ajax({
 4                   url:"/localoperate/projects/projectfiles/",     // 需要请求的url
 5                   type: 'POST',　　　　　　// 请求的方式
 6                   data: {dirnames: dirnames},　　　　// 返回的数据
 7                   success: function(data){
 8                           $('#project_'+dirnames).after(data); 　　　　// 将数据加载到id='project_{{ dirnames }}' 的后面。
 9                   },
10                   error: function(){
11                          $('#project_'+dirnames).after("<span>加载错误！</span>"); 　　// 如果没有加载成功。报个错误信息
12                  }    
13              }) 
14      }
15  </script>

今天碰到了几个有趣的东西。

一直想要把写好的那个html代码加载到 id='project_{{ dirnames }}' 后面。对与ajax比较生疏。google了下了解到
after(), insertAfter(), before(), insertBefore(), append(), appendTo()他们的用法。

 1 after()
 2 $('#id').after('<span>after</span>')        // 在id='id' 元素节点后插入
 3 
 4 before()
 5 $('#id').before('<span>before</span>')        // 在id='id' 元素节点之前插入
 6 
 7 append()
 8 $('#id').append('<span>append</span>')        // 在id='id' 元素节点内的最后插入
 9 
10 insertAfter()
11 $('<span>insertAfter</span>').insertAfter('#id')        // 功能和after()一样
12 
13 // 其余类似after和insertAfter

1 <input type='button' onclick=getfiles({{ dirnams }}) value='test'/>  // 就可以触发上面的ajax的异步加载了，当然，要自己写好要加载的html页面。

 

判断元素节点是否为空。

1 if ($('#id').length>0){
2      do_sth       
3 }

今天有点收获。ajax这里有点懂得意思了。

转载于:https://www.cnblogs.com/h3idan/archive/2013/04/22/3036780.html