jquery ajax 传递 2 个数组，然后将它们拆分并在 laravel 中分别使用

Posted 2023-03-14

【中文标题】jquery ajax 传递 2 个数组，然后将它们拆分并在 laravel 中分别使用

【英文标题】：jquery ajax passing 2 arrays and then split them and use them separetely in laravel

【发布时间】：2018-01-09 06:14:42

【问题描述】：

当我在视图中更改下拉列表的值时，我通过控制器中的 ajax 调用传递它以返回 2 个数组以更改 laravel 中同一视图中的 2 个其他下拉列表。

控制器代码为：

public function CreatGegCityAjax($id)
        
    $offices = \App\office::where("city_id",$id)->orderBy('name','asc')->get()->pluck('name','id');
    $chars = \App\Char::where("city_id",$id)->orderBy('name','asc')->get()->pluck('name','id');

    return json_encode(array('offices' => "$offices",'chars' => "$chars"));
 

视图中的代码是

$('select[name="city_id"]').on('change', function() 
        var cityID = $(this).val();

        if(cityID) 
            $.ajax(
                url: '/admin/gegonos/ajax/city/'+cityID,
                type: "GET",
                dataType: "json",                    
                success:function(data)    

                $('select[name="office_id"]').empty();

                $.each(data, function(key, value) 
                   $('select[name="office_id"]').append('<option value="'+ key +'">'+ value.offices +'</option>');
                );    

                $('select[name="char_id"]').empty();

                $.each(data, function(key, value) 
                   $('select[name="char_id"]').append('<option value="'+ key +'">'+ value.chars +'</option>');
                );    
                                    
            );
        else
            $('select[name="office_id"]').empty();
            $('select[name="char_id"]').empty();
        
    );      

这可以正常工作，但不会在下拉列表中获取值。它显示“未定义”。 如何使用右侧下拉列表中的每个数组拆分 json 数据的值？ 谢谢

【问题讨论】：

请在您的ajax成功回调函数中使用console.log(data)的结果更新问题

console.log(data) 到底应该放在哪里？

在success:function(data)

我把它和显示办公室：[] chars: []

这意味着您的 eloquent 查询中的 $offices 和 $chars 什么都不返回

【参考方案1】：

在你的控制器中试试这个：

return response()->json(['offices'=>$offices, 'chars'=>$chars]);

在此处查看有关 Laravel json 响应的信息：http://coursesweb.net/laravel/responses#anc_jre

然后，将console.log(data) 放入success:function 中，在控制台查看收到的响应，并根据其结构进行解析。

【讨论】：

使用这个返回 office: [object Object] chars: [object Object]

非常感谢您的回答帮助我解决了这个问题。

【参考方案2】：

假设您收到来自控制器的json 响应，格式为

'offices' : 
        '1' : 'name',
        '2' : 'name'
    ,
'chars': 
        '1' : 'name',
        '2' : 'name'
    

您需要将成功回调函数更改为

success: function(data) 

    $('select[name="office_id"]').empty();

    if (Object.keys(data.offices).length) 

        $.each(data.offices, function(key, value) 
            $('select[name="office_id"]').append('<option value="'+ key +'">'+ value +'</option>');
        );

    

    $('select[name="char_id"]').empty();

    if (Object.keys(data.chars).length) 

        $.each(data.chars, function(key, value) 
            $('select[name="char_id"]').append('<option value="'+ key +'">'+ value +'</option>');
        );