Laravel y Ajax – Insertar datos en la tabla sin actualizar

En primer lugar, debo decir que soy principiante con el uso de Ajax … Así que ayúdenme, muchachos. Quiero insertar los datos en db sin actualizar la página. Hasta ahora, tengo el siguiente código … En Blade tengo un formulario con un ID:

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

Y en el controlador tengo:

 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']); } } 

Estoy intentando con ajax para insertar en la base de datos:

  $('#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") } }); }); 

También en mi web.php tengo una ruta para agregar favoritos. Pero cuando envío el formulario, me devuelve la respuesta JSON de esta manera: {"status":"success","idUser":"15","idArticle":"343970"} … En realidad se inserta en la db, Pero quiero que la página no se vuelva a cargar. Sólo para mostrar el cuadro de alerta.

Como dice @sujivasagam, está realizando una acción regular. Trate de reemplazar su javascript con esto. También reconocí algún error de syntax pero se corrige aquí.

 $("#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") } }); }); 

En su lugar, simplemente puede reemplazar con y probablemente no necesitará event.preventDefault() que impide que se publique el formulario.

EDITAR

Aquí hay un ejemplo de cómo obtener y publicar solo con javascript como se solicita en los comentarios.

 (function() { // Loads items into html var pushItemsToList = function(items) { var items = []; $.each(items.data, function(i, item) { items.push('
  • '+item.title+'
  • '); }); $('#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(); }); })();

    Está utilizando el tipo de botón “Enviar” que normalmente envía el formulario. Así que haz eso como botón y al hacer clic en esa llamada la función ajax

    Cambie el tipo de botón a type="button" y agregue la acción onclick onclick = “yourfunction ()”. y simplemente ponga ajax dentro de su función.

    Reemplace el tipo de entrada con el botón y haga que el oyente onClick. Asegúrate de usar este identificador de entrada en el detector de clics:

    Asi que:

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

    También cambiaría la identificación a algo más claro.