枫自由而落/展望未来

jax异步删除

开发环境: Windows 10  wampp  laravel5.1.33

前台CODE:

第一步: <a onclick="del({{$p->pid}});">移 除</a> 绑定事件

第二步:JS代码:

<script type=”text/javascript”>

    function del(pid){

    //alert(pid);

    var data = ‘pid=’ + pid; //拼接值pid

    var xhr = new XMLHttpRequest();

   xhr.open(‘post’,’/del’);

   xhr.setRequestHeader(‘Content-type’,’application/x-www-form-urlencoded’);

   xhr.send(data);

   xhr.onreadystatechange = function(){

   if(this.readyState == 4){

   var bb = document.getElementById(‘149594’+pid);

   //console.log(bb);

  //alert(1);

   bb.remove();

   }

   }

  }

</script>

注意点:1)获取要删除的元素<li id=”149594{{$p->pid}}”> 删除的元素需    要与你的pid对应,所以给原来的id拼接在一起

             2) js中一切皆对象,所有这里最关键的还是获取到对象,由于我们想要删除的li标签是通过foreach遍历的,如果直接删除,那么可能导致全部的信息删除,所有我们在这里把{{$P->pid}}和li标签的id连接在一起,如此每个遍历出来的li对象都是唯一的

后台code:

public function del(Request $req) {

$pid = $req->pid;

$msg = Position::find($pid)->delete();

}

注意点:1,获取被删除元素,可以在页面查看,看看具体要删除那个元素,

2,laravel中的token验证

3var data = 'pid=' + pid; 因为传过来的pid值不认识,需要先拼接,在发送