时间戳

首页 > 解决方案 > 使用 Ajax 和 formData 的 Laravel 419 错误，

javascript - 使用 Ajax 和 formData 的 Laravel 419 错误，

问题描述

我的表单数据没有发送任何东西我不知道为什么我试图逐行调试，我发现问题在data: formData变量中，有人可以帮助我：

我也无法使用 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;
});
    });

标签： javascriptjquerylaravelserialization

解决方案

使用序列化收集数据

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


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

对于令牌将其添加到您的 html

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

然后在发送ajax请求之前设置这个

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

例子：

文件：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>

在这个简单的示例中，我在标题中设置 csrf 令牌，然后当用户单击按钮时，我收集数据并发送 ajax 请求

推荐阅读