Laravel 和 Ajax - 将数据插入表而不刷新

Question

首先，我不得不说我是使用 Ajax 的初学者......所以请帮助我。 我想将数据插入数据库而不刷新页面。到目前为止，我有以下代码... 在 Blade 中，我有一个带有 id 的表单：

{!! Form::open(['url' => 'addFavorites', 'id' => 'ajax']) !!}

  <a href="#" id="favorite" class="bookmark"><img align="right" src="{{ asset('/img/icon_add_fav.png')}}"></a>
  <input type="hidden" name = "idUser" id="idUser" value="{{Auth::user()->id}}">
  <input type="hidden" name = "idArticle" id="idArticle" value="{{$docinfo['attrs']['sid']}}">
  <input type="submit" id="test" value="Ok">

{!! Form::close() !!}

在控制器中我有：

public function addFavorites()
{
    $idUser               = Input::get('idUser');
    $idArticle            = Input::get('idArticle');
    $favorite             = new Favorite;
    $favorite->idUser     = $idUser;
    $favorite->idArticle  = $idArticle;
    $favorite->save();

    if ($favorite) {
        return response()->json([
            'status'     => 'success',
            'idUser'     => $idUser,
            'idArticle'  => $idArticle]);
    } else {
        return response()->json([
            'status' => 'error']);
    }
}

我正在尝试使用ajax插入数据库：

   $('#ajax').submit(function(event){
      event.preventDefault();

   $.ajax({
      type:"post",
      url:"{{ url('addFavorites') }}",
      dataType="json",
      data:$('#ajax').serialize(),
      success: function(data){
         alert("Data Save: " + data);
      }
      error: function(data){
         alert("Error")
      }
   });
   });

还在我的

web.php

中我有一个添加收藏夹的路线。但是当我提交表单时，它会返回如下 JSON 响应：

{"status":"success","idUser":"15","idArticle":"343970"}

...它实际上插入到数据库中，但我希望页面不要重新加载。只是为了显示警报框。

Answer 1

正如 @sujivasagam 所说，它正在执行常规的后期操作。尝试用这个替换你的javascript。我还发现了一些语法错误，但这里已更正。

$("#ajax").click(function(event) {
    event.preventDefault();

    $.ajax({
        type: "post",
        url: "{{ url('addFavorites') }}",
        dataType: "json",
        data: $('#ajax').serialize(),
        success: function(data){
              alert("Data Save: " + data);
        },
        error: function(data){
             alert("Error")
        }
    });
});

您可以将

<input type="submit">

替换为

<button>

，您可能不需要

event.preventDefault()

，这会阻止表单发布。

编辑

这是一个按照评论中的要求仅使用 javascript 获取和发布的示例。

(function() {

    // Loads items into html
    var pushItemsToList = function(items) {
        var items = [];

        $.each(items.data, function(i, item) {
            items.push('<li>'+item.title+'</li>');
        });

        $('#the-ul-id').append(items.join(''));
    }

    // Fetching items
    var fetchItems = function() {
        $.ajax({
            type: "GET",
            url: "/items",
            success: function(items) {
                pushItemsToList(items);
            },
            error: function(error) {
                alert("Error fetching items: " + error);
            }
        });
    }

    // Click event, adding item to favorites
    $("#ajax").click(function(event) {
        event.preventDefault();

        $.ajax({
            type: "post",
            url: "{{ url('addFavorites') }}",
            dataType: "json",
            data: $('#ajax').serialize(),
            success: function(data){
                  alert("Data Save: " + data);
            },
            error: function(data){
                 alert("Error")
            }
        });
    });

    // Load items (or whatever) when DOM's loaded
    $(document).ready(function() {
        fetchItems();
    });
})();

Answer 2

您正在使用通常提交表单的“提交”按钮类型。因此，将其设置为按钮，然后单击该按钮调用 ajax 函数

Answer 3

将按钮类型更改为

type="button"

并添加 onclick 操作 onclick="yourfunction()"。只需将 ajax 放入您的函数中即可。

Answer 4

用按钮替换输入类型并制作 onClick 监听器。确保在 onclick 侦听器中使用此输入 id：

所以：

$('#test').on('click', function(event){
  event.preventDefault()
  ... further code

我也会将 id 更改为更清晰的内容。

Answer 5

代码运行 100%

$('#form').on('提交', 函数(事件){ event.preventDefault();

enter code here

        $.ajax({
            url: "{{url('/insert')}}",
            data: $("#form").serialize(),
            type: 'POST',
            success:function(response)
            {
                alert(response);
                $("#form")[0].reset();
            }
        });
    });