Laravel 419 Error using Ajax and formData,

Question

My form data doesn't send any thing i don't know why i tried to debug line by line and i found the problem in data: formData variabe, can someone help me:

also i can't stop redirection using return false

$(function(){
// When Form #xhr is Submited
$('#xhr').submit(function(){
    var selectedFile = null;
    var data = new FormData();

    //if(selectedFile !== null)
    data.append('image', selectedFile, selectedFile.name)

    $($(form).serializeArray()).each(function(i, field){ 
        data.append(field.name, field.value);
    });


    $.ajax({
        url: $(form).attr('action'),
        data: data,
        dataType: 'JSON',
        cache: false,
        contentType: false, 
        processData: false,
        method: 'POST',
        success: function(data){
            alert(data.success);
        }
    });
    return false;
});
    });

Answer 1

use serialize for collecting data

var formData = $('form').serializeArray(),


$.ajax({
    url: $("#myform").attr('action'),
    type: "POST",
    data: formData,
    contentType: "application/json",
    dataType: "json",
    success: function(){
        alert("yes");
    }
});

for token add this in your html

    <meta name="csrf-token" content="{{ csrf_token() }}">

then before sending ajax request set this

 $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

$.ajax({
    url: $("#myform").attr('action'),
    type: "POST",
    data: formData,
    contentType: "application/json",
    dataType: "json",
    success: function(){
        alert("yes");
    }
});

example:

file:index.blade.php

<!doctype html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>Document</title>
</head>
<body>
    <form action="" id="myform">
        <input type="text" name="first" id="first">
        <input type="text" name="second" id="second">
        <input type="text" name="third" id="third">
        <button type="button" id="mysubmitbutton">submit</button>
    </form>
    <script>
       $("body").on("click", "#mysubmitbutton", function () {
       $.ajaxSetup({
           headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf- token"]').attr('content')          }
        });


       $.ajax({
           type: "POST",
           url: "{{ route('myRouteName') }}",
           data: {
                    'first': $("#first").val(),
                    'second': $("#second").val(),
                    'third': $("#third").val()
                 },
           success: function (msg) {
               alert('wooow');
           }
        });
    });
     </script>
     </body>
 </html>

in this simple example i set csrf token in header then when user click on button i collect data and send ajax request

Laravel 419 Error using Ajax and formData,

Question

1 answers

solution1
0 2020-04-16 23:14:53

Laravel 419 Error using Ajax and formData,

Question

1 answers

solution1 0 2020-04-16 23:14:53

solution1
0 2020-04-16 23:14:53