Question

Laravel 5 中的 Javascript 问题

2017-08-10

67

javascript laravel

我学习 laravel 5 大约一个月了，现在我遇到了 javascript 问题。我添加了一个表单，单击 blade 文件即可删除帖子。但现在我不想使用表单，我用 javascript 替换它。我如何检测何时触摸“删除”按钮。

@extends ('layouts.master')

@section ('head.title')
Blog
@stop

@section ('body.content')
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
            </div>
        </div>

        <form class="form-show">
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3">
                    <h2> {{ $article->title}} </h2>
                    <p>  {{ $article->content}} </p>
                </div>

                <div class="row">
                    <div class="col-sm-6 col-sm-offset-3">
                        <a href=" {{ route('article.edit', $article->id) }}" class="btn btn-info">Cập nhật</a>
                        <button type="submit" class="btn btn-primary">Xoa</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script src="jshow.js"></script>
@stop

Answer 1

为按钮添加 ID，以便在 Javascript 中轻松找到它

<button id="delete-button" type="submit" class="btn btn-primary">Xoa</button>

接下来添加此 javascript

var deleteButton = document.getElementById("delete-button");
deleteButton.onclick = function() { delete(); return false; }

在 delete() 方法中处理删除

Answer 2

尝试一下：

  <!DOCTYPE html>
 <html>
  <body>


 <button onclick="myFun()">Click me</button>

 <p id="demo"></p>

   <script>
 function myFun() {
 console.log('Clicked');
 }
 </script>

Answer 3

Since HTML forms can't make PUT , PATCH , or DELETE requests, you will need to add a hidden _method field to spoof these HTTP verbs

另外，不要忘记添加 csrf-token ，这是验证 POST 请求所必需的。

首先在 <head> 内添加此元标记。

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

然后将此代码放在 JS 文件的顶部。

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

现在，您可以使用 data-* 属性来保存该文章的 route 以用于 AJAX。

<button data-route="{{ route('article.destroy', $article->id) }}" class="btn btn-danger deleteArticle">Delete</button>

在您的 JS

document.querySelector('.deleteArticle').addEventListener('click', function() {
    var route = this.dataset.route;

    if (confirm("Are you sure you wish to delete this article?")) {
        $.ajax({
            method: 'POST',
            url: route,
            data: {
                "_method": 'DELETE',
            },
            success: function() {
                // handle success here
            },
            error: function() {
                // handle error here
            },
        });
    }
});