как автозаполнить форму с помощью ajax laravel?

Question

Я пытаюсь заполнить форму с помощью cnic, который я назвал уникальным.Если Cnic существует, тогда все поля против введенного cnic с автозаполнением.как я это сделаю?Я загрузил мою форму, JQuery и контроллер.Если вам нужно больше данных, чтобы понять, вы можете спросить.Я получаю данные, но форма не заполняется запросом ajax.как решить эту проблему?

Моя форма:

<form class="form" method="post" action="{{route('add.member')}}">
    <input type="hidden" name="_token" value="{{csrf_token()}}">
    <div class="row justify-content-md-center">
        <div class="col-md-6">
            <div class="form-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name">Name</label>
                            <input type="text" id="name" class="form-control" placeholder="Enter Name" name="name" value="{{old('name')}}">
                            @if ($errors->has('name'))
                            <span style="color: red" class="help-block">{{ $errors->first('name') }}</span>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="cnic">CNIC</label>
                            <input type="number" id="cnic" class="form-control" placeholder="Enter CNIC" name="cnic" value="{{old('cnic')}}">
                            @if ($errors->has('cnic'))
                            <span style="color: red" class="help-block">{{ $errors->first('cnic') }}</span>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="mobile_number">Mobile Number</label>
                            <input type="number" id="mobile_number" class="form-control" placeholder="Enter Mobile Number" name="mobile_number" value="{{old('mobile_number')}}">
                            @if ($errors->has('mobile_number'))
                            <span style="color: red" class="help-block">{{ $errors->first('mobile_number') }}</span>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="party_joining_year">Party Joining Year</label>
                            <input type="text" id="party_joining_year" class="form-control" placeholder="Enter Party Joining Year" name="party_joining_year" value="{{old('party_joining_year')}}">
                            @if ($errors->has('party_joining_year'))
                            <span style="color: red" class="help-block">{{ $errors->first('party_joining_year') }}</span>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="qualification">Qualification</label>
                            <input type="text" id="qualification" class="form-control" placeholder="Enter Qualification" name="qualification" value="{{old('qualification')}}">
                            @if ($errors->has('qualification'))
                            <span style="color: red" class="help-block">{{ $errors->first('qualification') }}</span>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="party_position">Party Position</label>
                            <input type="text" id="party_position" class="form-control" placeholder="Enter Party Position" name="party_position" value="{{old('qualification')}}">
                            @if ($errors->has('party_position'))
                            <span style="color: red" class="help-block">{{ $errors->first('party_position') }}</span>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="profession">Profession</label>
                    <input type="text" id="profession" class="form-control" placeholder="Enter Profession" name="profession" value="{{old('qualification')}}">
                    @if ($errors->has('profession'))
                    <span style="color: red" class="help-block">{{ $errors->first('profession') }}</span>
                    @endif
                </div>
                <div class="form-group">
                    <label for="district">District/Tahseel</label>
                    <input type="text" id="district" class="form-control" placeholder="Enter District" name="district" value="{{old('qualification')}}">
                    @if ($errors->has('district'))
                    <span style="color: red" class="help-block">{{ $errors->first('district') }}</span>
                    @endif
                </div>
            </div>
        </div>
    </div>
</form>

Ajax:

$("#cnic").focusout(function(e){
        // alert($(this).val());
        var cnic = $(this).val();
        $.ajax({
            type: "POST",
            url: "{{route('get.all.fields')}}",
            data: {'cnic':cnic},
            dataType: 'json',
            success : function(e) {
                if(e===0){
                    $('.flash-message').html('Data not found');
                    $('#cnic').val('');
                }
                else {
                    $('.flash-message').html('');
                    r = $.parseJSON(e); //convert json to array
                    $('#name').autocomplete({
                        source: r.name,
                    }); //assign name value
                    $('#mobile_number').autocomplete({
                        source: r.mobile,
                    }); //assign email value
                    $('#party_joining_year').autocomplete({
                        source: r.party_joining_year,
                    }); //assign department value
                    $('#qualification').autocomplete({
                        source: r.qualification,
                    }); //assign department value
                    $('#party_position').autocomplete({
                        source: r.party_position,
                    }); //assign department value
                    $('#profession').val(r.profession).autocomplete({
                        source: r.profession,
                    }); //assign department value
                    $('#district').val(r.profession).autocomplete({
                        source: r.district,
                    }); //assign department value
                    $("#cnic").html(e);

                }
            }
        });
    });

</script>

Мой контроллер:

 public function getAllFields(Request $request)
{
    $getFields = Member::where('cnic', $request->get('cnic'))->get(['name','mobile','party_joining_year','qualification','party_position','profession','district']);
    return json_encode($getFields[0]['mobile']);
}

Маршрут:

  Route::post('/get_fields', 'MemberController@getAllFields')->name('get.all.fields');

Answer 1

В вашем контроллере вы должны возвращать правильный ответ JSON

public function getAllFields(Request $request)
{
    try {
        $getFields = Member::where('cnic',$request->cnic)->first();
        // here you could check for data and throw an exception if not found e.g.
        // if(!$getFields) {
        //     throw new \Exception('Data not found');
        // }
        return response()->json($getFields, 200);
    } catch (\Exception $e) {
        return response()->json([
            'message' => $e->getMessage();
        ], 500);
    }
}

Вам не нужно анализировать JSON как

 dataType: 'json'

автоматически ожидает JSON, а переменная ответа уже будет объектом, и вам просто нужно отобразить его как

$("#cnic").focusout(function(e){
    // alert($(this).val());
    var cnic = $(this).val();
    $.ajax({
        type: "POST",
        url: "{{route('get.all.fields')}}",
        data: {'cnic':cnic},
        dataType: 'json',
        success : function(data) {
            $('#name').val(data.name); 
            $('#mobile_number').val(data.mobile); 
            $('#party_joining_year').val(data.party_joining_year);
            ...
        },
        error: function(response) {
            alert(response.responseJSON.message);
        }
    });
});

Answer 2

Вы должны внимательно прочитать документы по Laravel. вам не нужно получать входные данные, если вы хотите получить строку из базы данных.

Метод -> get () возвращает массив всех совпадающих строк. Метод -> first () возвращает только первую строку, которая соответствует предложению where.

Итак, вы должны сначала исправить красноречивый запрос. Если вы хотите указать столбцы, которые вы хотите извлечь из базы данных, вы должны использовать метод -> select. Но я не вижу причин для этого. поэтому ваш контроллер должен выглядеть так:

 public function getAllFields(Request $request)
{
    $getFields = Member::where('cnic',$request->get('cnic'))->first();
    return json_encode($getFields);
}

После этого вы должны декодировать массив JSON с помощью jquery и добавлять значения по одному.

$("#cnic").focusout(function(e){
        // alert($(this).val());
        var cnic = $(this).val();
        $.ajax({
            type: "POST",
            url: "{{route('get.all.fields')}}",
            data: {'cnic':cnic},
            dataType: 'json',
            success : function(e) {
                if(e.length === 0){
                    $('.flash-message').html('Data not found');
                    $('#cnic').val('');
                }
                else {
                    $('.flash-message').html('');
                    r = $.parseJSON(e); //convert json to array
                    $('#name').val(r.name); 
                    $('#mobile_number').val(r.mobile); 
                    $('#party_joining_year').val(r.party_joining_year)

                     and so on...

                    $("#cnic").html(e); //-> I dont realy understand why you use this part of code?

                }
            }
        });
});

Помните : вы должны получить поля из объекта "r" точно по имени столбца базы данных, для которой вы получаете данные.