Laravel 5.2 - 如何将变量（数组和整数）从视图传递到控制器？

Posted 2023-03-15

【中文标题】Laravel 5.2 - 如何将变量（数组和整数）从视图传递到控制器？

【英文标题】：Laravel 5.2 - How to pass variables (arrays and ints) from view to controller?

【发布时间】：2016-06-03 19:26:45

【问题描述】：

我正在尝试将数据从 javascript 代码传递到控制器，但我无法在控制器代码中获取变量数据。

我有一个视图，它有一个关联的 Js 文件，它检查何时单击提交按钮并创建一些包含要发送到服务器的数据的数组。

我已经尝试了很多解决方案（注释表单并使用 URL 定义按钮的属性，使用表单发布操作，在 javascript 中使用 $.post），但我似乎无法让它工作。

我已包含代码以更好地说明我正在尝试做的事情。

导入查看代码：

   <form id="importar" class="form-horizontal" role="form" method="POST" action=" url('/importarLista1') ">
        csrf_field() 
        <input type="text" class="form-control" name="startFrom" id="startFrom" value="">
    <div class="col-md-4">
        <button class="btn btn-primary" id="importar" data-href=" url('/importarLista1') ">
            <i class="fa fa-btn fa-sign-in"></i>Importar
        </button>
    </div>
      </form>

JavaScript 代码：

  var fdata=  "startFrom="+ startFrom;
      fdata+=   "&idList="+ idList;
      fdata+=   "&nomeCampos="+ nomeCampos;
        fdata+=    "&posicaoCampos="+ posicaoCampos;
 $.ajax(
        type:'POST',
        url: $( this ).attr( 'data-href' ) /*$( this ).prop( 'action' ) $( this ).attr( 'data-href' )*/,
      data:fdata,
        dataType:'json',
    cache:false,
    success:function (data)
    alert(data);
    

);

nomeCampos 和 posicaoCampos 是使用 javascript 创建的数组，并为它们分配了值，因此它们不为空

JavaScript 代码编辑1 来自答案的更新代码

$('#importar').submit(function() 
    if($('#startFrom').val()=='') 
        var startFrom = 0;
    else
        var startFrom = $('#startFrom').val();
    
    var nomeCampos = new Array();
    var posicaoCampos = new Array();
    $('tbody tr').each( function()
        $('td', this).each(function(e)
            posicaoCampos[e] = $(this).attr('idc');
        );
        return false;
    );

    var idList = $('#idList').val();
    var fdata= "_token="+ $( this ).find( 'input[name=_token]' ).val();
    fdata+=  "&startFrom="+ startFrom;
    fdata+=   "&idList="+ idList;
    fdata+=   "&nomeCampos="+ nomeCampos;
    fdata+=    "&posicaoCampos="+ posicaoCampos;
    e.preventDefault();

    $.post( // short hand for  $.ajax( type:'POST'
        $(this).attr('action'), // url, from form
        $(this).serialize(), // form data, name and value
        function(data) 
            // on success...
            alert(data);
        
    );
); // end form.submit

控制器代码

  protected function importList1(Request $request)
    echo $_POST['startFrom'];
    exit();
    if($request->ajax()) 
        $data = Input::all();
        print_r($data);die;
    
    print_r($request->all());

路线

Route::post('/importarLista1','ContactsList\ContactListController@importList1');

示例解决方案 这就是我的最终代码的样子

JavaScript

 function preparePostData()
        var token         = $( '#importar' ).find('input[name=_token]').val();
        var startFrom     = 0;
        var idList        = $('#idList').val();
        var nomeCampos    = new Array(); // not sure where this is getting used?
        var posicaoCampos = new Array();

        if($('#startFrom').val()=='' || $('#startFrom').val()<=0 ) 
            var startFrom = 0;
        else
            var startFrom = $('#startFrom').val()-1;
        
        var nomeCampos = new Array();
        var posicaoCampos = new Array();

        $('thead tr th').each(function(e)
         for(var i = 0; i < nomeCampos.length; i++)
         if(nomeCampos[i]==$('select', this).val())
         $.Notification.autoHideNotify('error', 'top right', 'STATUS', 'Não pode selecionar Campos Iguais');
         exit();
         
         
         nomeCampos[e] = $('select', this).val();
         );

        $('tbody tr').each( function()
            $('td', this).each(function(e)
                posicaoCampos[e] = $(this).attr('idc');
            );
            return false;
        );
        var file_data=$('input:file')[0].files;
        var postdata=new FormData();
        postdata.append('_token',token);
        postdata.append('startFrom',startFrom);
        postdata.append('idList',idList);
        postdata.append('nomeCampos',nomeCampos);
        postdata.append('posicaoCampos',posicaoCampos);
        postdata.append('file',file_data[0]);
        return postdata;
    

 $('#importar').submit(function(e) 
       e.preventDefault();
           fdata=preparePostData();
        $.ajax(
            type:'POST',
            url:   $(this).prop('action'), // url, from form
            data:fdata,
            processData: false,
            contentType: false,
            success:function(data) 
                window.location.replace(data.url);
            
        );
    ); // end form.submit

控制器

 if ($request->session()->token() !== $request->get('_token')) 
        return Response::json(array(
            'status' => 'error',
            'msg' => 'Invalid token'
        ));
    
    $idCompany = $request->session()->get('current_company');
    $skipValue = $request->get('startFrom');
    $idList = $request->get('idList');
    $arrayPos = $request->get('posicaoCampos');
    $arrayCampos = $request->get('nomeCampos');

做你需要做的事

【问题讨论】：

您可以使用$request->input('startFrom') 代替Input::get 和/或$_POST

【参考方案1】：

这是我在 laravel 应用程序中使用 ajax 表单时的方法，因为我确信它适用于许多其他应用程序......

你有你的表格：

HTML

<form id="importar" class="form-horizontal" role="form" method="POST" action=" url('/importarLista1') ">
     csrf_field() 

    <input type="text" class="form-control" name="startFrom" id="startFrom" value="">

    <div class="col-md-4">
        <button class="btn btn-primary" id="importar" data-href=" url('/importarLista1') ">
            <i class="fa fa-btn fa-sign-in"></i>Importar
        </button>
    </div>
</form>

如果您从一个表单提交所有数据，而不是这样做来准备数据：

var fdata=  "startFrom="+ startFrom;
    fdata+=   "&idList="+ idList;
    fdata+=   "&nomeCampos="+ nomeCampos;
    fdata+=    "&posicaoCampos="+ posicaoCampos;

您可以改为监听表单提交（您可能需要更新/添加到表单的按钮到type="submit"）并使用serialize() 方法获取所有数据。 （当然，这只有在所有内容都采用一种形式时才有效，而且我不清楚您是否是这种情况。）

所以你可以这样做：

JS

$('form').submit(function() 
    e.preventDefault();

    $.post( // short hand for  $.ajax( type:'POST'
        $(this).attr('action'), // url, from form
        $(this).serialize(), // form data, name and value
        function(data)  
            // on success...
            alert(data);
        
    );
); // end form.submit

PHP/控制器代码

protected function importList1(Request $request)

    // return the data back as ajax
    return response()->ajax([
        'data' => $request->all()
    ]);

希望有帮助！

一些额外的建议，在开始同时使用 laravel 和 ajax 时，如果在 chrome 上，您希望打开 开发者工具。你当然可以在 firefox 中使用 firebug。

使用开发人员工具，在表单上点击提交之前，检查网络选项卡，然后点击提交，看看会发生什么。您应该会看到一个新的发布请求。然后，您可以单击表单在网络选项卡中创建的发布请求，以检查正在发生的事情和返回的内容。

简而言之，开发人员工具对于调试 ajax 请求非常有用，因为您不会在屏幕上获得任何反馈。您可能还想查看名为 postman 的 chrome 扩展来测试您的 ajax 请求。

编辑

由于您不只是将表单用于调用后的数据，因此序列化表单数据是不够的。

我提取了您的代码，为对单独函数的后期调用准备数据，使其更具可读性，并在提交表单时调用该函数。

数据作为对象而不是字符串传递给$.post方法。

我只是在我的文本编辑器中编写了代码，我没有对其进行测试。所以可能会有一些错误，如果遇到任何错误，请尝试一下。

JS

$('#importar').submit(function() 

    e.preventDefault(); // stop the form from submitting data 

    // prep data for ajax post
    var postData = preparePostData(); // call function to get data

    // perform ajax post
    $.post( // short hand for  $.ajax( type:'POST'
        $(this).attr('action'), // url, from form
        postData, // form data, name and value
        function(data) 
            // on success...
            alert(data);
        
    );
); // end form.submit

function preparePostData() 
    var token         = $( this ).find('input[name=_token]').val();
    var startFrom     = 0;
    var idList        = $('#idList').val();
    var nomeCampos    = new Array(); // not sure where this is getting used?
    var posicaoCampos = new Array();

    if ($('#startFrom').val()=='') 
        var startFrom = 0;
     else 
        var startFrom = $('#startFrom').val();
    

    $('tbody tr').each( function()
        $('td', this).each(function(e)
            posicaoCampos[e] = $(this).attr('idc');
        );

        return false;
    );

    var postData = 
        _token: token,
        startFrom: startFrom,
        idList: idList,
        nomeCampos: nomeCampos,
        posicaoCampos: posicaoCampos
    ;

    return postData;

【讨论】：

我试过你说的，我可以得到来自表单元素的值，但变量不存在，也许问题是数组不是元素（如 html 元素）？我将更新问题中的 JS 代码，以便您了解我在说什么

更新了原帖的代码，我应该把fdata放在serialize里面吗？

正如我在回答“如果您从一个表单提交所有数据”中提到的，如果您不是（看起来不像），那么只需更改第二个参数以您之前传递数据的方式。或者，您可以将其作为 JSON 对象传递，我将在几秒钟内更新我的答案以向您展示。

@DiogoSilva 我已经更新了我的答案，希望一切都有意义？

谢谢这是正确的答案，我稍后会发布解决方案