Laravel - 根据选择选项从另一个模型中拉取细节

Question

我很想知道是否可以从创建表单上的单独表中提取详细信息。

例如，如果我有各种各样的字段，其中一个是带有用户列表的下拉列表，我想根据我的选择显示其选择选项下方的详细信息（来自表中的字段）从下拉列表。

我假设它可以通过AJAX，但我不完全确定它是一个创建形式和所有。

有没有人有什么建议？

更新

与选择框相关的html / php的一部分

 <div class="box-body">

                <select name="bill_to" required class="js-example-basic-single" style="width:100%;" id="bill_to" onchange="invoicedue(event);">
     <option></option>
     @foreach($customers as $customer)
     <option value="{{ $customer->id }}">{{ $customer->customer_name }}</option>
     @endforeach
    </select> 
{{ csrf_field() }}

JavaScript的

<script>
function billtodetails(e){
    $('#bill_to').change(function() {
        $.ajax({
            type:'POST',
            url: '/customers/customerDetails',
            data: {
                'customerID': $('select[name=bill_to]').val(),
               '_token': $('input[name=_token]').val(),
            },
                success: function(data) {
                    $('.errorTitle').addClass('hidden');
                    $('.errorContent').addClass('hidden');

                    if ((data.errors)) {
                        setTimeout(function () {
                            $('#createOrigin').modal('show');
                            toastr.error('Check your inputs!', 'Error Alert', {timeOut: 5000});
                        }, 500);

                        if (data.errors.title) {
                            $('.errorTitle').removeClass('hidden');
                            $('.errorTitle').text(data.errors.title);
                        }
                        if (data.errors.content) {
                            $('.errorContent').removeClass('hidden');
                            $('.errorContent').text(data.errors.content);
                        }
                    } else {
                        toastr.success('Successfully added Origin!', 'Success Alert', {timeOut: 5000});
                       $('#existing_biller_details').append(
                           '<p>'+data['customer_name']+'</p><p>'+data['billing_address_1']+'</p>';
                        );
                    }
                },
            });
        });
});

</script>

根据评论建议编辑版本：

<script>
$(function(){
    $('#bill_to').change(function() {
        $.ajax({
            type:'POST',
            url: '/customers/customerDetails',
            data: {
                'customerID': $('select[name=bill_to]').val(),
               '_token': $('input[name=_token]').val(),
            },
                success: function(data) {
                    $('.errorTitle').addClass('hidden');
                    $('.errorContent').addClass('hidden');

                    if ((data.errors)) {
                        setTimeout(function () {
                            $('#createOrigin').modal('show');
                            toastr.error('Check your inputs!', 'Error Alert', {timeOut: 5000});
                        }, 500);

                        if (data.errors.title) {
                            $('.errorTitle').removeClass('hidden');
                            $('.errorTitle').text(data.errors.title);
                        }
                        if (data.errors.content) {
                            $('.errorContent').removeClass('hidden');
                            $('.errorContent').text(data.errors.content);
                        }
                    } else {
                        toastr.success('Successfully added Origin!', 'Success Alert', {timeOut: 5000});
                       $('#existing_biller_details').append(
                           '<p>'+data['customer_name']+'</p><p>'+data['billing_address_1']+'</p>';
                        );
                    }
                },
            });
        });
});

</script>

使用工作脚本更新：

<script>
$(function(){
    $('#bill_to').change(function() {
        $.ajax({
            type:'POST',
            url: '/customers/customerDetails',
            data: {
                'customerID': $('select[name=bill_to]').val(),
               '_token': $('input[name=_token]').val(),
            },
                success: function(data) {
                    $('.errorTitle').addClass('hidden');
                    $('.errorContent').addClass('hidden');

                    if ((data.errors)) {
                        setTimeout(function () {
                            $('#createOrigin').modal('show');
                            toastr.error('Check your inputs!', 'Error Alert', {timeOut: 5000});
                        }, 500);

                        if (data.errors.title) {
                            $('.errorTitle').removeClass('hidden');
                            $('.errorTitle').text(data.errors.title);
                        }
                        if (data.errors.content) {
                            $('.errorContent').removeClass('hidden');
                            $('.errorContent').text(data.errors.content);
                        }
                    } else {
                        toastr.success('Changed Bill To!'+data.customer_name, 'Success Alert', {timeOut: 5000});
                       $('#existing_biller_details').append(
                           '<p>'+data.customer_name+'</p><p>'+data.billing_address_1 +'</p>');

                    }
                },

                error: function (jqXHR, textStatus, errorThrown) {
                  if (jqXHR.status == 500) {
                      alert('Internal error: ' + jqXHR.responseText);
                  } else {
                      alert('Unexpected error.');
                  }
                }
            });
        });
});

</script>

从响应有效负载返回：

[[{"id":3,"company_name":"Power Equipment Company","first_name":"","last_name":"","account_type":1,"shipping_address_1":"","shipping_address_2":"","shipping_city":"","shipping_state":"","shipping_zipcode":"","billing_address_1":"","billing_address_2":"","billing_city":"","billing_state":"","billing_zipcode":"","primary_phone":"","primary_fax":"","old_account_number":"","website":"","created_at":"2017-11-20 19:41:52","updated_at":"2017-11-20 19:41:52","customer_name":"Power Equipment Company","origin":null,"primary_email":null,"created_by":0}]]

Answer 1

基于以下评论来自用户@charlietfl的问题（非常感谢他），该脚本已更正为提供错误报告并从报告中提取数据，但同时也将其作为GET请求而非POST请求。根据最后一条评论中的建议添加dataType。

    <script>
$(function(){
    $('#bill_to').change(function() {
        $.ajax({
            type:'GET',


    url: '/customers/customerDetails',
dataType:'json',
                data: {
                'customerID': $('select[name=bill_to]').val(),
               '_token': $('input[name=_token]').val(),
            },
                success: function(data) {
                    $('.errorTitle').addClass('hidden');
                    $('.errorContent').addClass('hidden');

                    if ((data.errors)) {
                        setTimeout(function () {
                            $('#createOrigin').modal('show');
                            toastr.error('Check your inputs!', 'Error Alert', {timeOut: 5000});
                        }, 500);

                        if (data.errors.title) {
                            $('.errorTitle').removeClass('hidden');
                            $('.errorTitle').text(data.errors.title);
                        }
                        if (data.errors.content) {
                            $('.errorContent').removeClass('hidden');
                            $('.errorContent').text(data.errors.content);
                        }
                    } else {
                        toastr.success('Changed Bill To!'+data.customer_name, 'Success Alert', {timeOut: 5000});
                       $('#existing_biller_details').append(
                           '<p>'+data.customer_name+'</p><p>'+data.billing_address_1 +'</p>');

                    }
                },

                error: function (jqXHR, textStatus, errorThrown) {
                  if (jqXHR.status == 500) {
                      alert('Internal error: ' + jqXHR.responseText);
                  } else {
                      alert('Unexpected error.');
                  }
                }
            });
        });
});

</script>