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

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

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

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

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

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

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

after()
$('#id').after('<span>after</span>')        // 在id='id' 元素节点后插入

before()
$('#id').before('<span>before</span>')        // 在id='id' 元素节点之前插入

append()
$('#id').append('<span>append</span>')        // 在id='id' 元素节点内的最后插入

insertAfter()
$('<span>insertAfter</span>').insertAfter('#id')        // 功能和after()一样

// 其余类似after和insertAfter

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

 

判断元素节点是否为空。

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

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