使用AJAX从PHP加载的数据填充列表框

编程问答 2022-08-15

问题描述

我的目标是显示当按下包含用户ID的按钮时，带有两个列表框的加载的模式div，其中两个列表框一个具有可用的用户组，另一个具有当前用户所在的组。

此刻数据正在成功

开发人员工具日志：

[{id: 1,name: "Admin",idgrupo: 1,nome: "AdminisTrador"},…]
0: {id: 1,nome: "AdminisTrador"}
1: {id: 1,idgrupo: 2,nome: "Cliente"}

但是没有任何错误代码，数据不会在模式div上显示。

这是代码：

## Controller：

public function getGroups($id)
{

  $data = \DB::table('grupoutilizador')
  -> join ('users',function ($join) use ($id){
    $join->on('users.id','=','grupoutilizador.iduser')
    ->where('users.id',"=",$id );
  }) -> join ('grupo','grupo.idgrupo','grupoutilizador.idgrupo') ->
  select('users.id','users.name','grupo.nome')
  -> get();



  return response()->json($data,200);
}

## JavaScript：

function saveGroup(type,id){
  $('#useridgr').attr('placeholder','').val('');
  $("#usernamegr").attr('placeholder','Nome').val('');
  $('#list_Box').html('');
  $('#list_Box_ini').html('');
  
  if (type == 1){
    
    
  } else {
    loadatagroup(id);
  }
  
}
var loadatagroup = (uid) => {
  
  $.ajax({
    type: 'GET',url: 'usergrupo/' + uid,data: {'_token': $("input[name='_token']").val()},success: function(data){
      
      $('#useridgr').attr('placeholder',data.id).val(data.id);
      $("#usernamegr").attr('placeholder',data.name).val(data.name);
       
      <?PHP
      
      $gruposini = MysqLi_query($conn2,'SELECT *,0 AS INUSE FROM grupo');
      
      while($row = MysqLi_fetch_array($gruposini)) {
        
        $stringoption =  "$(\"#list_Box_ini\").append(\"<option value='".$row['idgrupo']."'>".$row['nome']."</option>\");";
        
      }
      
      ?>
      
      for (i=0; i<data.lenght; i++){
        
        var id = response[i]['idgrupo'];
        var name = response[i]['nome'];
        
        $("#list_Box").append("<option value='"+id+"'>"+name+"</option>");
      }
      
      
      
    }
    
  })
  
}

## HTML：

  <div class="card-body">
    
    
    <div class="form-group bmd-form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text"><i class="material-icons"></i></div>
        </div>
        <input name = 'id' type="text" class="form-control" placeholder="" id='useridgr' disabled hidden>
      </div>
    </div>
    
    
    <div class="form-group bmd-form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text"><i class="material-icons">face</i></div>
        </div>
        <input name = 'name' type="text" class="form-control" placeholder="" id='usernamegr' disabled>
      </div>
    </div>
    
    <select  id = "list_Box_ini" name="list_Box_ini"  multiple="multiple"> </select>
    
    
    <select  id = "list_Box" name="list_Box"  multiple="multiple"> </select>
    
  </form>
</div>

如何显示数据？

解决方法

我已经设法找到了解决方法，现在我需要获取代码库并对其进行优化。

工作代码在这里：https://codereview.stackexchange.com/questions/248194/how-to-get-my-js-code-cleaner

ajaxjavascriptlaravellaravelmodal-dialog