（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>