如何在Laravel中使用Ajax在单个页面上存储具有多个按钮数据的多种形式

时间:2018-08-14 11:18:20

标签: ajax laravel-5.5

这是我的表单,我不想进行任何更改或表单操作以及按钮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>

这是我的路线:     路线:: 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');

    },
});

}

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

2 个答案:

答案 0 :(得分:0)

您的代码无法正常工作的原因有很多。

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中的错误日志文件,以查看您的代码是否引发了其他任何错误或异常。这将为您提供堆栈跟踪,以帮助您确定可能导致错误的文件和行。

答案 1 :(得分:0)

谢谢,但是我提交的数据没有{{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>