jquery - 使用 ajax 填充输入值(Laravel 6)

Question

我在下拉列表中选择后填充输入时遇到问题。我的数据库中有一个包含联系方式详细信息的表。在我的表单上，我有一个下拉菜单，其中显示人员姓名，一旦我单击姓名，就会用数据填充字段。为此，我将 Ajax 与 Jquery 结合使用，我的请求得到了很好的响应，但我的字段中没有出现任何内容。如何解决这个问题？

下拉菜单:

       <select class="form-control select2 col-md-7" id="selInscrit" name="selInscrit">
            @foreach($inscrit as $inscrits)
            <option value="{{$inscrits->INS_ID}}">{{$inscrits->INS_CIVILITE}} {{$inscrits->INS_NOM}} {{$inscrits->INS_PREN}} {{$inscrits->INS_NUM_RUE}} {{$inscrits->INS_Rue}}</option>
            @endforeach
        </select>

形式:

<form>
    <div class="form-group row">
        <div class="col-lg-1">
            <label for="INS_CIVILITE">Civilité</label>
            <select class="form-control form-control-sm" id="INS_CIVILITE" name="INS_CIVILITE">
                <option value="" selected="selected"></option>
                <option value="1">Mme</option>
                <option value="2">Mlle</option>
                <option value="3">M.</option>
            </select>
        </div>
        <div class="col-lg-4">
            <label for="INS_NOM">Nom</label>
            <input class="form-control form-control-sm" id="INS_NOM" name="INS_NOM" value=""  type="text">
        </div>
        <div class="col-lg-3">
            <label for="INS_PREN">Prénom</label>
            <input class="form-control form-control-sm" id="INS_PREN" name="INS_PREN" value=""  type="text">
        </div>
        <div class="col-lg-2">
            <label for="INS_NAISS">Année Naiss</label>
            <input class="form-control form-control-sm" id="INS_NAISS" name="INS_NAISS" value="" type="text">
        </div>
        <div class="col-lg-2">
            <label for="INS_AGE">Age</label>
            <input class="form-control form-control-sm" id="INS_AGE" name="INS_AGE" value="" type="text">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-lg-1">
            <label for="INS_NUM_RUE"># Rue</label>
            <input class="form-control form-control-sm" id="INS_NUM_RUE" name="INS_NUM_RUE" value="" type="text">
        </div>
        <div class="col-lg-9">
            <label for="INS_Rue">Libellé voie</label>
            <input class="form-control form-control-sm" id="INS_Rue" name="INS_Rue" value="" type="text">
        </div>
        <div class="col-lg-2">
            <label for="INS_TEL1">Téléphone 1</label>
            <input class="form-control form-control-sm" id="INS_TEL1" name="INS_TEL1" value="" type="text">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-lg-8">
            <label for="INS_OBS">Observation</label>
            <input class="form-control form-control-sm" id="INS_OBS" name="INS_OBS" value="" type="text">
        </div>
        <div class="col-lg-2">
            <label for="INS_DATE">Date d'inscription</label>
            <input class="form-control form-control-sm" id="INS_DATE" name="INS_DATE" value="" type="text">
        </div>
        <div class="col-lg-2">
            <label for="INS_TEL2">Téléphone 2</label>
            <input class="form-control form-control-sm" id="INS_TEL2" name="INS_TEL2" value="" type="text">
        </div>
    </div>
</form>

Ajax 脚本:

<script>
$('#selInscrit').change(function() {
    var id = $(this).val();
    var url = '{{ route("show", ":id") }}';
    url = url.replace(':id', id);

    $.ajax({

        url: url,
        type: 'get',
        dataType: 'json',
        success: function(response) {
            if (response != null) {
                $('#INS_CIVILITE').val(response.INS_CIVILITE);
                $('#INS_NOM').val(response.INS_NOM);
                $('#INS_PREN').val(response.INS_PREN);
                $('#INS_NAISS').val(response.INS_NAISS);
                $('#INS_AGE').val(response.INS_AGE);
                $('#INS_NUM_RUE').val(response.INS_NUM_RUE);
                $('#INS_Rue').val(response.INS_Rue);
                $('#INS_TEL1').val(response.INS_TEL1);
                $('#INS_OBS').val(response.INS_OBS);
                $('#INS_DATE').val(response.INS_DATE);
                $('#INS_TEL2').val(response.INS_TEL2);
            }

        }

    });
});

Controller :

public function show($id = 0)
{
    $data = Inscrit::where('INS_ID', $id)->first();
    dd($id, $data);
    return response()->json($data);
}

数据库

表格

回应

Answer 1

首先您应该删除dd($id, $data)，因为dd函数会转储给定的变量并结束脚本的执行

类似的东西

success: function (data) {
    if(data === undefined) {
        alert('empty');
        return;
    }
    $('#INS_CIVILITE').val(response.INS_CIVILITE);
    $('#INS_NOM').val(response.INS_NOM);
    $('#INS_PREN').val(response.INS_PREN);
    //...
}  

应该可以。