Question

我有一个简单的表单，允许用户将链接添加到其主屏幕，然后根据需要将其删除，这是非常简单的内容。

该表单非常简单，提交表单时，它仅会捕获已登录的用户和链接详细信息，并将其放入表格中。然后检查是否存在以下关系：$user->links。

然后我执行一个foreach循环，并在表单上方显示这些链接。

刀片本身：

<div class="grid-item element-item" data-item-id="{{$widgetNo}}">
    <section class="widget" id="expenses">
        <!-- Find an expert -->

        <div class="form-box dark_grey">

            <div class="row header">

                <div class="col-xs-10">
                    <div class="heading">
                        <h2>My Useful Links</h2>
                    </div>
                </div>

                <div class="col-xs-2 widget">

                    @include('partials.widget-button')

                </div>

            </div>

            @if(count(auth()->user()->links) > 0)
            <div class="row mb-30">
                <div class="col-xs-12">
                    <div id="my-links">
                    @foreach(auth()->user()->links as $link)
                        <a href="{{ $link->url }}" target="_blank">{{ $link->name }}</a>
                        <a class="delete-link pull-right" href="{{ action('LinkController@destroy', $link->id) }}"> (delete)</a>

                        <br />
                    @endforeach
                    </div>
                </div>
            </div>
            @endif

            <div class="form-container">

                <form method="post" action="{{ action('LinkController@store') }}">
                    @csrf()
                    <div class="row">

                        <div class="form-group col-xs-12 col-md-12">
                            <label for="search-box">Link name</label>
                            <input type="text" class="form-control filled" id="search-box" name="name" placeholder="eg: My Cintra" required>
                        </div>

                        <div class="form-group col-xs-12 col-md-12">
                            <label for="search-box">Link URL</label>
                            <input type="text" class="form-control filled" id="search-box" name="url" placeholder="eg: https://rigel.newable.io" required>
                        </div>

                        <div class="form-group col-xs-12 col-md-12">
                            <button type="submit" id="find-contact" class="btn btn-filled-blue btn-block no-margin">Add link</button>
                        </div>
                    </div>
                </form>

            </div>

        </div>

    </section>
</div>

我想知道的是，有没有一种方法可以在不刷新整个页面的情况下添加或删除这些元素，而不必发送成功的原始html重新填充div？

我也有一个delete方法的开始，关于如何在添加或删除div时我会产生分歧？

如果我想更广泛地使用AJAX，是否应该更改路由以返回JSON而不是视图？

jQuery Ajax-删除元素

0 个答案: