如何用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，并且response变量已经是一个对象，您只需要像这样映射它

$("#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文档。如果要从db中获取一行，则不需要获取输入。

-> get（）方法返回所有匹配行的数组。 -> first（）方法仅返回与where子句匹配的第一行。

因此，您必须首先更正雄辩的查询。如果要指定要从数据库检索的列，则必须使用-> select方法。但是我没有任何理由这样做。因此您的控制器必须如下所示：

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

此后，您必须使用jquery解码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(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”对象中获取字段。