Question

我正在尝试将数据从Javascript代码传递到Controller，但我无法在Controller Code中获取变量数据。

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

我已经尝试了很多解决方案（使用URL，使用表单post action定义一个属性到按钮，使用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());
}

路线

路线::交（＆＃39; / importarLista1＆＃39;，＆＃39; ContactsList \ ContactListController @ importList1＆＃39）;

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

的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');

做你需要做的事

Answer 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; }

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

1 个答案: