Получить данные в форме через Ajax в Laravel

Question

Я делаю форму автозаполнения, в которой пользователь вводит только идентификатор, и вся информация, связанная с этим идентификатором, попадает в другое поле.Я использую ajax и Laravel 5.4.Данные поступают в тревоге, но как я могу вставить данные в поля ввода формы.Вот мой скрипт:

<script type="text/javascript">
 $('#submitid').on('click', function() {

    var vid = $( "#vid" ).val();
       //var id=$(this).data('id');

        $.ajax({
              url: '/inquiryVendor',
              type: "Get",
              data:{id:$("#vid").val()}, // the value of input having id vid
               success: function(response){ // What to do if we succeed

            alert(response); console.log(response);


        }
            });
    });
</script>

это мой контроллер:

public function VendorDetail(Request $request)
    {

    $id= $request->id;

      $data = DB::select(DB::raw("SELECT * from bp where id = '$id'"));
      echo json_encode($data);

    }

вот мой ответ console.log:

[{"id":37,"card_name":"Maka Furniture Co.,Ltd ","trade_type":"Manufacturer","address":"Xinzhang development zones,Shengfang town,Hebei province.","fc":"121AC209","status":0,"created_at":"2018-10-10 10:02:27","user":"admin"}]

вот скриншотответ:

Любая помощь будет весьма полезна.

Answer 1

Предположим, в вашей форме есть поля ввода, подобные этим

<input type="text" name="vendor_name" id="vendor_name">
<input type="text" name="vendor_mobile" id="vendor_mobile">
<input type="text" name="vendor_email" id="vendor_email">

Ваш код ajax должен быть таким, и я надеюсь, что вы получите параметры в своем ответе JSON

<script type="text/javascript">
 $('#submitid').on('click', function() {

 var vid = $( "#vid" ).val();
   //var id=$(this).data('id');

    $.ajax({
          url: '/inquiryVendor',
          type: "Get",
          data:{id:$("#vid").val()}, // the value of input having id vid
           success: function(response){ // What to do if we succeed
            $('#vendor_name').val(response.vendor_name)
            $('#vendor_mobile').val(response.vendor_mobile)
            $('#vendor_email').val(response.vendor_email) 
           }
        });
});
</script>

Еслитогда это не поможет, пожалуйста, сделайте console.log (ответ) и вставьте данные отладки, чтобы вам было легче помочь вам.

<script type="text/javascript">
 $('#submitid').on('click', function() {

 var vid = $( "#vid" ).val();
   //var id=$(this).data('id');

    $.ajax({
          url: '/inquiryVendor',
          type: "Get",
          data:{id:$("#vid").val()}, // the value of input having id vid
           success: function(response){ // What to do if we succeed
            console.log(response)
           }
        });
});
</script>

если вы не хотите ответа [0], вам нужно изменить в вашем файле контроллера этот файл.

$vendor = DB::table('bp')->where('id', '.$id.')->first();
return response()->json($vendor);

В соответствии с вашими потребностями это наверняка поможет.

Answer 2

Если вы хотите, чтобы все данные были в одном входе, вы можете использовать это

<script type="text/javascript">
     $('#submitid').on('click', function() {

        var vid = $( "#vid" ).val();
           //var id=$(this).data('id');

            $.ajax({
                  url: '/inquiryVendor',
                  type: "Get",
                  dataType: 'json',//this will expect a json response
                  data:{id:$("#vid").val()}, 
                   success: function(response){ 
                        $("#inputfieldid").val(response);     
            }
                });
        });
    </script>

или, если вы хотите в другом поле ввода, вы можете сделать это следующим образом

<script type="text/javascript">
 $('#submitid').on('click', function() {

    var vid = $( "#vid" ).val();
       //var id=$(this).data('id');

        $.ajax({
              url: '/inquiryVendor',
              type: "Get",
              dataType: 'json',//this will expect a json response
              data:{id:$("#vid").val()}, 
               success: function(response){ 
                    $("#inputfieldid1").val(response.id); 
                    $("#inputfieldid2").val(response.2ndcolumnName);
                    $("#inputfieldid").val(response.3rdcolumnName); 

        }
            });
    });
</script>

Answer 3

добавьте уникальное свойство ID к вашему входу, например так:

<input id="name" type="text">

Затем заполните этот результат результатом ajax следующим кодом:

<script type="text/javascript">
 $('#submitid').on('click', function() {

    var vid = $( "#vid" ).val();
       //var id=$(this).data('id');

        $.ajax({
              url: '/inquiryVendor',
              type: "Get",
              data:{id:$("#vid").val()}, // the value of input having id vid
               success: function(response){ // What to do if we succeed
                $('#name').val(JSON.parse(response)[0].name); //<---- This line,

        }
            });
    });
</script>

Сделайте это для всей вашей базы ввода, которую вылогика.

Answer 4

В других ваших полях вы можете сделать следующее в случае успеха:

success: function(response) { 
  $('.input1').val(response.input1);
  $('.input2').val(response.input2);
  $('.label1').html(response.label1);
}

Надеюсь, это будет полезно.