Laravel & Ajax - вставлять данные в таблицу без обновления

Прежде всего, я должен сказать, что я начинаю использовать Ajax ... Так помогите мне, ребята. Я хочу вставить данные в db, не обновляя страницу. До сих пор у меня следующий код ... В клинке у меня есть форма с 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"}... Он фактически вставляет в db, но я хочу, чтобы страница не перезагружалась. Просто для отображения окна предупреждения.

javascript,php,jquery,ajax,laravel,

1

Ответов: 4

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

Вы используете кнопку типа «Отправить», которые обычно отправляют форму. Поэтому сделайте это как кнопку и щелкнув по этому вызову функцию ajax

0

Измените свой тип кнопки type="button"и добавьте действие onclick onclick = "yourfunction ()". и просто положите ajax внутри вашего funciton.

0

Замените тип ввода кнопкой и сделайте onClick прослушиватель. Убедитесь, что вы используете этот входной идентификатор в onclick listener:

Так:

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

Я бы тоже изменил идентификатор на что-то более четкое.

JavaScript, PHP, JQuery, Ajax, Laravel,
Похожие вопросы
Яндекс.Метрика