javascript - 在 Laravel 中通过 Ajax 获取表单中的数据

Question

我正在制作一个自动完成表单，用户只输入 ID，与该 ID 相关的所有信息都在其他字段中。我正在使用 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>

这是我的 Controller :

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

如果你想在一个输入中输入所有数据，你可以使用这个

<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>