如何在 laravel 中使用 ajax 在单个页面上存储具有多个按钮数据的多个表单

how to store multiple form with multiple buttons data on single page using ajax in laravel

这是我的表单,我不想做任何更改或表单操作和按钮 ID:-

<form action="store" method="post">
<input type="text" class="form-control" id="add_related_product" name="addons_heading" value="<?php if (isset($setting['addons_heading'])){echo htmlentities($setting['addons_heading']);}?>">
<input type="text" class="form-control" id="label_quantity" name="quantity" value="<?php if (isset($setting['quantity'])){echo $setting['quantity'];}?>">
<button type="button" onclick="saveAjaxSetting()" class="sg-main-btn sg-primary-btn" id="ajaxSubmit">Save</button>
</form>

<form action="store" method="post">
<input type="number" class="form-control" id="max_accessories" name="max_accessories" value="<?php if (isset($setting['max_accessories'])){echo $setting['max_accessories'];}?>">
<input type="text" class="form-control" id="max" name="max" value="<?php if (isset($setting['max'])){echo $setting['max'];}?>">
<button type="button" onclick="saveAjaxSetting()" class="sg-main-btn sg-primary-btn" id="ajaxSubmit">Save</button>
</form>

这是我的路线:- Route::post('/store','Crud\SettingController@saveSetting');

这是我的设置控制器:-

public function saveSetting(StoreSetting $request)
{
    try{
        //Log::info($request);
        $setting= request(['is_active','max_accessories','quick_view','accessory_discription','thumbnail','quantity_selector','addons_heading','quantity','variant','price']);

        $data= array_map(array($this,'settingData'), array_keys($setting), array_values($setting));

        $keys=array_keys($setting);
        //Log::info($data);
        if (!empty($data))
        {
            Model::whereIn('entity_name',$keys)->delete();
            $settingData= Model::insert($data);
            return true;
        }
        return false;

    }
    catch (\Exception $e) {
        Log::error($e->getMessage());
        throw new \Exception("Setting not saved in ");
        return false;
    }
}

我的 ajax 脚本是:-

function saveAjaxSetting(data) {
console.log(data);
$.ajax({
    type: 'POST',
    url: "/spiceaddons/public/store",
    dataType: 'json',
    data: {
        "method": 'POST',
        "data": data
    },
    error: function (err) {
        console.log(err);
        toastr.error('Error in saved');
    },
    success: function (data) {
        console.log(data);
        toastr.success(' Setting saved');

    },
});

}

这是所有代码 和 问题:- 数据未插入数据库。

您的代码无法正常工作的原因可能有多种。

1 - CSRF 令牌

您的 API 通话正在使用 POST。假设此路由在 web.php 路由文件中,这意味着您的表单需要包含 CSRF 令牌。为此,将以下行添加到每个 HTML 表单(在开始 form 标记之后):

{{ csrf_field() }}

2 - 可填写字段

如果您在模型中使用 $fillable,则需要确保该数组包含您期望的所有字段。如果 $fillable 数组中缺少任何列,数据将不会保存到该列。

protected $fillable = [ 'name', 'value', ... ];

3 - 检查 laravel.log 文件

检查 storage/logs/larave.log 中的错误日志文件,查看您的代码是否抛出了任何其他错误或异常。这将为您提供一个堆栈跟踪,以帮助您确定是哪个文件和行导致了错误。

谢谢,但我在没有{{ csrf_field() }} 的情况下提交数据,因为我停止了中间件。我在按钮上使用了 onclick 事件,所以我的新 ajax 代码在这里并且工作正常:-

<script>
    function accessorySetting() {
        var data={'max_accessories':$('input[name="max_accessories"]').val(),
                  'quick_view':$('input[name="quick_view"]:checked').val(),
                  'thumbnail':$('option:selected').val(),
                  'accessory_discription':$('input[name="accessory_discription"]:checked').val(),
                  'quantity_selector':$('input[name="quantity_selector"]:checked').val()
                };

        saveAjaxSetting(data);
    }

    function languageSetting() {
        var data={'addons_heading':$('input[name="addons_heading"]').val(),
                  'quantity':$('input[name="quantity"]').val(),
                  'variant':$('input[name="variant"]').val(),
                  'price':$('input[name="price"]').val()};
        //alert(JSON.stringify(data));
        saveAjaxSetting(data);
    }

    function saveAjaxSetting(data1) {
    //alert(JSON.stringify(data1));
    $.ajax({
    type: 'POST',
    url: "/spiceaddons/public/store",
    dataType: 'json',
    data:data1,
        success: function (data) {
            console.log(data);
            toastr.success("Setting Save Successfully");
        },
        error: function (err) {
            var response = JSON.parse(err.responseText);
            $.each( response.errors, function( key, value) {
                toastr.error(value);
            });

        },

    });
    }
</script>