Home » Laravel 6 Ajax post data Example

Laravel 6 Ajax post data Example

Today, We want to share with you Laravel 6 Ajax post data.In this post we will show you how to use post method in laravel, hear for laravel ajax post data to controller we will give you demo and example for implement.In this post, we will learn about Laravel 6 – Create First Ajax CRUD Application from Scratch with an example.

Laravel 6 Ajax post data

There are the Following The simple About Laravel6 Ajax post data Full Information With Example and source code.

As I will cover this Post with live Working example to develop laravel ajax best practice, so the some major files and Directory structures for this example is following below.

Read Also:  how to insert data using ajax in laravel with datatables?

Example 1: Laravel 6 Ajax Request Example

<script type="text/javascript">
   
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
   
    $(".btn-submit").click(function(e){
  
        e.preventDefault();
   
        var name = $("input[name=name]").val();
        var password = $("input[name=password]").val();
        var email = $("input[name=email]").val();
   
        $.ajax({
           type:'POST',
           url:"{{ route('ajaxRequest.post') }}",
           data:{name:name, password:password, email:email},
           success:function(data){
              alert(data.success);
           }
        });
  
	});
</script>

Laravel 6 Ajax Request Example

<script>
  $(document).ready(function () {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    /*  When product click add product button */
    $('#create-new-product').click(function () {
        $('#btn-save').val("create-product");
        $('#productForm').trigger("reset");
        $('#productCrudModal').html("Add New Product");
        $('#ajax-crud-modal').modal('show');
    });
 
   /* When click edit product */
    $('body').on('click', '#edit-product', function () {
      var product_id = $(this).data('id');
      $.get('ajax-crud/' + product_id +'/edit', function (data) {
         $('#productCrudModal').html("Edit Product");
          $('#btn-save').val("edit-product");
          $('#ajax-crud-modal').modal('show');
          $('#product_id').val(data.id);
          $('#name').val(data.name);
          $('#price').val(data.price);
      })
   });
   //delete product login
    $('body').on('click', '.delete-product', function () {
        var product_id = $(this).data("id");
        confirm("Are You sure want to delete !");
 
        $.ajax({
            type: "DELETE",
            url: "{{ url('ajax-crud')}}"+'/'+product_id,
            success: function (data) {
                $("#product_id_" + product_id).remove();
            },
            error: function (data) {
                console.log('Error:', data);
            }
        });
    });   
  });
 
 if ($("#productForm").length > 0) {
      $("#productForm").validate({
 
     submitHandler: function(form) {
 
      var actionType = $('#btn-save').val();
      $('#btn-save').html('Sending..');
      
      $.ajax({
          data: $('#productForm').serialize(),
          url: "https://www.domain_name.com/laravel-example/ajax-crud/store",
          type: "POST",
          dataType: 'json',
          success: function (data) {
              var product = '<tr id="product_id_' + data.id + '"><td>' + data.id + '</td><td>' + data.name + '</td><td>' + data.price + '</td>';
              product += '<td><a href="javascript:void(0)" id="edit-product" data-id="' + data.id + '" class="btn btn-info">Edit</a></td>';
              product += '<td><a href="javascript:void(0)" id="delete-product" data-id="' + data.id + '" class="btn btn-danger delete-product">Delete</a></td></tr>';
               
              
              if (actionType == "create-product") {
                  $('#users-crud').prepend(product);
              } else {
                  $("#product_id_" + data.id).replaceWith(product);
              }
 
              $('#productForm').trigger("reset");
              $('#ajax-crud-modal').modal('hide');
              $('#btn-save').html('Save Changes done');
              
          },
          error: function (data) {
              console.log('Error:', data);
              $('#btn-save').html('Save Changes done');
          }
      });
    }
  })
}
   
  
</script>

Web Programming Tutorials Example with Demo

Read :

Read Also:  Laravel ajax get Request Example From Scratch

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about laravel ajax post to controller.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP Stripe api Send Accept Payment Integration
  2. Read Also:  Laravel 6 Ajax CRUD Example
  3. Read Also:  install nodejs on Xampp localhost - setup node.js development environment
  4. Read Also:  PHP Converting an array to JSON Tutorial With Example
  5. Read Also:  convert number to words in codeigniter
  6. Read Also:  How to Clear cache in Laravel 5.8?
  7. Read Also:  Simple JQuery Ajax Request Example with Laravel 6
  8. Read Also:  PHP Laravel AJAX Request GET and POST Example
  9. Read Also:  Group By with Count using Laravel Collection
  10. Read Also:  laravel 6 Retrieve data using jQuery Ajax

Leave a Comment

Your email address will not be published. Required fields are marked *