javascript - (Laravel + Ajax) url 错误并且 AJAX 不起作用

Question

这是我在 Blade 中的代码我想尝试单击按钮，然后使用 AJAX 将 id 发送到 Controller 。

<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);
          }
        });

路线.php

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

Controller

 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 的响应。

看起来没有通过路由页面，然后因为 URL 错误而得到错误。有谁知道原因吗？

Answer 1

您还有额外的}在网址中。删除它。

{{url('/deleteNews')}}

您还需要添加 CSRF。否则你会得到 HttpException。

将此元添加到 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>