如何在 API 中使用 ajax 将 laravel 表单数据发布到控制器答案

【问题标题】：How to post laravel form data to controller using ajax in API如何在 API 中使用 ajax 将 laravel 表单数据发布到控制器
【发布时间】：2019-08-06 09:41:03
【问题描述】：

我有一个在 Android Web 视图中打开的表单，我想将数据保存到数据库中，但是当我进行 ajax 调用并尝试打印数据时显示一个空白数组，以下是我的代码：

<div class="card-body card-padding">
    <form id="submitdataform">
        @csrf
        @foreach($formfields as $key=>$value)
            <input type="hidden" name="campaign_id" value="{{$key}}"/>
            @foreach($value as $attrkey)
                <input type="hidden" name="attribute_id[]" value="{{$attrkey->id}}"/>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="pure-material-textfield-outlined w-100">
                                {{--<input placeholder=" " type="text" required>--}}
                                <?php
                                if ($attrkey->attribute_type == 'alpha') {
                                    echo "<input placeholder=' ' type='text' name='attribute_value[]' required>";
                                } elseif ($attrkey->attribute_type == 'date') {
                                    echo "<input placeholder=' ' type='date' name='attribute_value[]' required>";
                                } elseif ($attrkey->attribute_type == 'numberic') {
                                    echo "<input placeholder=' ' type='number' name='attribute_value[]' required>";
                                }
                                ?>
                                <span>{{$attrkey->attribute_name}}</span>
                            </label>
                        </div>
                    </div>

                </div>
            @endforeach
        @endforeach
        <button type="button" id="submitbtn">Submit</button>
    </form>
</div>

现在ajax调用

$("#submitbtn").click(function (event) {
    event.preventDefault();
    var data = $("#submitdataform").serialize();
    $.ajax({
        type: "post",
        url: "savecampaigndata",
        data: {data: data},
        contentType: 'application/x-www-form-urlencoded',
        dataType: 'json',
        success: function (data) {
            // Android.passParams('dashboard');
        },
        error: function (data) {
            // Android.passParams(url);
        }
    });
});

这是我想要获取所有数据的控制器方法，

public function SaveCampaignData(Request $request)
{
    return response()->json($request->all());
    $data = $request->all();
    $attribute_id = [];
    $attribute_value = [];
    $campaign_id = $data['campaign_id'];
    $user_id = Auth::user()->id;

    foreach ($data as $key => $value) {
        if ($key == "attribute_id") {
            foreach ($value as $attrkey) {
                $attribute_id[] = $attrkey;
            }
        } else {
            if ($key == "attribute_value") {
                foreach ($value as $attrvalue) {
                    $attribute_value[] = $attrvalue;
                }
            }
        }
    }

    $mainArray = array_combine($attribute_id, $attribute_value);
    $currentdate = Carbon::now();
    foreach ($mainArray as $key => $value) {
        DB::table('campaign_attribute_values')->insert(
            [
                'campaign_id'              => $campaign_id,
                'campaign_attribute_id'    => $key,
                'user_id'                  => $user_id,
                'campaign_attribute_value' => $value,
                'created_at'               => $currentdate,
                'updated_at'               => $currentdate,
            ]
        );
    }

    if ($this->CheckSmsLimit() > 0) {
        $this->checkAutoReply($campaign_id, $user_id);
    }

    return redirect()->back()->with('success', 'Request Registered');
//        return response()->json(['status' => true, 'message' => 'Record saved succesfully', 'code' => 200]);
}

这是邮递员路线 URL：

https://subdomain.xyz.com/savecampaigndata

但它在我的控制器中提供了一个空白数组作为输出。

【问题讨论】：

好像你忘了在表单中添加 _token 字段，用于 csrf，或者只是将此路由添加到异常中，但这是不好的做法
@csrf 已添加，并且我的应用程序文件中还设置了 ajax
从 ajax 请求中删除 contentType: 'application/x-www-form-urlencoded'
我已经尝试了所有这些东西，但无法向控制器发送数据
此视图文件在 **android webview ** 中打开的一个重要事项 **

标签： php laravel android-webview postman

【解决方案1】：

$("#submitbtn").click(function (event) {
    event.preventDefault();
    var data = $("#submitdataform").serialize();
    $.ajax({
        type: "post",
        url: "{{ url('savecampaigndata) }}",
        data: {data: data},
        success: function (data) {
            // Android.passParams('dashboard');
        },
        error: function (data) {
            // Android.passParams(url);
        }
    });
});

如果您不想发送 csrf 令牌

然后

app/Http/Middleware/VerifyCsrfToken.php

并将该路由的 url 添加到 except 数组中

protected $except = [
   'savecampaigndata'
];

如果需要

然后添加头部

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

在脚本中

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

【讨论】：

【解决方案2】：

尝试在 ajax 调用的 url 属性中添加 '/' 并在 ajax 调用中添加 header 属性。

【讨论】：

【解决方案3】：

您收到空白回复的原因似乎是因为csrf。但是，我看到您已将其包含在表单中，因为您使用的是 serialize，它不会按您期望的方式工作。

您可以通过几种不同的方式添加 csrf：

如果您的脚本在刀片文件中，您可以简单地将其添加到数据对象中：
```
data: {
    data: data,
    _token: "{{ csrf_token() }}",
},
```
或者

根据documentation，您可以在页面的<head> 中添加以下内容：

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

然后在你拉入 jQuery 之后包含以下内容：

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

【讨论】：