（Laravel + Ajax）网址错误，AJAX无法正常工作

Question

这是我想尝试单击按钮的刀片中的代码，然后使用AJAX将ID发送给控制器。

<input type="button" onclick="javascript:del_click({{$leftnew->id}});" style="background-image:url(img/delete.jpg);background-size:cover;width:5px;height:12px; border:none; line-height:0;text-indent:-9999px; ">

AJAX部分

function del_click(data){
        //alert(data);
        var request = new XMLHttpRequest();
        $.ajax({
              type    :"POST",
              url     :"{{url('/deleteNews')}}}",
              dataType:"json",
              data    :{ data:data },
              success :function(response) {
                alert("thank u");
              },
              error: function(e) {
                console.log(e.responseText);
          }
        });

Route.php

Route::post('deleteNews','NewsController@deleteNews');

调节器

 public function deleteNews(Request $request){
        $news_id = $request->news_id;
        $news= NewstbEloquent::find($news_id);
        if($news->delete()){
            return redirect('/')->with('msg','success');
        }
        else{
            return redirect('/')->with('msg','error');
        }
    }

当我单击按钮时，它将得到响应。

http://localhost/YangMing567/public/deleteNews%7D

我不知道。 发生了什么？ 为什么会有“％7D”？ 我没有在URL中设置它，它得到了带有％7D的响应。

看起来好像没有通过路线页面，则由于网址错误而导致错误。 有人知道原因吗？

Answer 1

网址中有额外的} 。 去掉它。

{{url('/deleteNews')}}

另外，您还需要添加CSRF。 否则，您将获得HttpException。

将此meta添加到head标签：

<meta name="csrf-token" content="{{ csrf_token() }}">

在ajax请求之前添加以下内容：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

因此，您的脚本必须是：

<script>
    function del_click(data){
        //alert(data);
        var request = new XMLHttpRequest();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type    :"POST",
            url     :"{{url('/deleteNews')}}",
            dataType:"json",
            data    :{ data:data },
            success :function(response) {
                alert("thank u");
            },
            error: function(e) {
                console.log(e.responseText);
            }
        });
    }
</script>