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

eblbsuwk 于 12个月前发布在 jQuery

关注(0)|答案(4)|浏览(129)

首先，我必须说，我是使用Ajax的初学者.所以帮助我的家伙.我想插入数据到数据库中，而不刷新页面.到目前为止，我有以下代码.在刀片我有一个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']);
    }
}

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

$('#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"}.它实际上插入到数据库中，但我不希望页面重新加载。只是显示警报框。

jquery

来源：https://stackoverflow.com/questions/42001499/laravel-ajax-insert-data-into-table-without-refreshing

4条答案

按热度按时间

c90pui9n1#

正如@sujivasagam所说，它正在执行一个常规的post操作。尝试用这个替换你的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")
        }
    });
});

字符串
你可以用<button>代替<input type="submit">，你可能不需要阻止表单发布的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();
    });
})();

型

赞(0）回复(0）举报 12个月前

jtjikinw2#

你使用的按钮类型“提交”通常提交的形式。因此，使作为按钮，并在点击该调用的aplog函数

赞(0）回复(0）举报 12个月前

f2uvfpb93#

将按钮类型改为type="button"，并添加onclick action onclick=“yourfunction（）"。

赞(0）回复(0）举报 12个月前

bbuxkriu4#

将input type替换为button并创建onClick监听器。确保在onclick监听器中使用此输入id：
于是：

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

字符串
我也会把ID改成更清晰的。

赞(0）回复(0）举报 12个月前

我来回答

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

4条答案

相关问题

热门标签

最新问答