如何使用AJAX基于数据库中的值创建动态复选框？

Question

我想创建使用AJAX动态复选框，以便在类别的基础上复选框的数量应该出现在屏幕上。我已经在HTML中示例了代码，我想在JS中进行转换。

HTML代码

<div id="check-awesome" class="form-group checkbox"> 
    <input type="checkbox" id="History"> 
    <label for="History"> 
     <span></span> 
     <span class="check"></span> 
     <span class="box"></span> 
     History 
    </label> 
</div> 

Ajax代码

<script> 
    $(document).ready(function(){ 
     $.ajax({ 
      type:'post', 
      url:'/categories', 
      contentType:'application/json', 
      data: '{"_token":"<?php echo csrf_token() ?>"}', 
      success:function(data) { 
       for(i=0; i<=data.category_name.length;i ++) 
       { 
        var checkbox = document.createElement('input'); 
        checkbox.type="checkbox"; 
        checkbox.value=data.category_name.category_id; 
        checkbox.id=data.category_name[i].category_name; 
        var label= document.createElement('label'); 
        label.htmlFor=data.category_name[i].category_name; 
        var span=document.createElement('span'); 
        label.appendChild(span); 
        var span1=document.createElement('span'); 
        span1.className="check"; 
        label.appendChild(span1); 
        var span2=document.createElement('span'); 
        span2.className="box"; 
        label.appendChild(span2); 
        label.appendChild(document.createTextNode(data.category_name[i].category_name)); 
        var div= document.getElementById('check-awesome'); 
        div.appendChild(label); 
        div.appendChild(checkbox); 
       } 
       return div; 
      } 
     }); 
    }); 
</script> 

Answer 1

我已经想通了的烂摊子其实我打算在附加的顺序弄乱了其实这些复选框是有点不同的，只需要在创建后要追加所以代码应该是这样的。 谢谢大家的帮助！ :)

<script> 
    $(document).ready(function(){ 
    $.ajax({ 
     type:'post', 
     url:'/categories', 
     contentType:'application/json', 
     data: '{"_token":"<?php echo csrf_token() ?>"}', 
     success:function(data) { 
     for(i=0; i<=data.category_name.length;i ++) 
      { 
      var div= document.createElement('div'); 
      div.id="check-awesome"; 
      div.className="form-group checkbox" 
      var checkbox = document.createElement('input'); 
      checkbox.type="checkbox"; 
      checkbox.value=data.category_name.category_id; 
      checkbox.id=data.category_name[i].category_name; 
      div.appendChild(checkbox); 
      var label= document.createElement('label'); 
      label.htmlFor=data.category_name[i].category_name; 
      var span=document.createElement('span'); 
      label.appendChild(span); 
      var span1=document.createElement('span'); 
      span1.className="check"; 
      label.appendChild(span1); 
      var span2=document.createElement('span'); 
      span2.className="box"; 
      label.appendChild(span2); 
      label.appendChild(document.createTextNode(data.category_name[i].category_name)); 
      div.appendChild(label); 
      var get_div=document.getElementById('checkboxparent'); 
      get_div.appendChild(div); 
      } 
     return get_div; 
     } 
    }); 
    }); 
</script> 

Answer 2

我认为你犯了一个错误的for循环。 如果使用数组进行处理，则使用操作'<'而不是'< ='。从0而不是1

Answer 3

您在循环中创建的div check-awesom

数组的索引记得开始。但是你必须声明它不在循环中。我用的回调变量函数，所以当你的请求成功则函数会以创建DIV功能参数在其参数

$(document).ready(function() { 
      function createChecboxes(requestEndCallback) { 
       $.ajax({ 
        type: 'post', 
        url: '/categories', 
        contentType: 'application/json', 
        data: '{"_token":"<?php echo csrf_token() ?>"}', 
        async: true, // do this for synchronous call to ajax 
        success: function (data) { 
         var div = document.getElementById('check-awesome'); 
         for (i = 0; i < data.category_name.length; i++) { 
          var checkbox = document.createElement('input'); 
          checkbox.type = "checkbox"; 
          checkbox.value = data.category_name.category_id; 
          checkbox.id = data.category_name[i].category_name; 
          var label = document.createElement('label'); 
          label.htmlFor = data.category_name[i].category_name; 
          var span = document.createElement('span'); 
          label.appendChild(span); 
          var span1 = document.createElement('span'); 
          span1.className = "check"; 
          label.appendChild(span1); 
          var span2 = document.createElement('span'); 
          span2.className = "box"; 
          label.appendChild(span2); 
          label.appendChild(document.createTextNode(data.category_name[i].category_name)); 

          div.appendChild(label); 
          div.appendChild(checkbox); 
         } 
         requestEndCallback(div) 
        } 
       }); 
       return mydiv; 
      } 

      // call your function like this 
      createChecboxes(function (createdDiv) { 
       // use createdDiv in here 
      }) 
     }); 

PS。正如@Tri所说，你也写了<=而不是<作为条件。

Answer 4

您可以像这样添加复选框。

var place = document.getElementById('check-awesome'); 
for(i=0; i<=data.category_name.length;i ++) 
{ 
    var checkbox = document.createElement('input'); 
    checkbox.type="checkbox"; 
    checkbox.value=data.category_name.category_id; 
    checkbox.id=data.category_name[i].category_name; 

    var label= document.createElement('label'); 
    label.htmlFor=data.category_name[i].category_name; 
    var span=document.createElement('span'); 
    label.appendChild(span); 
    var span1=document.createElement('span'); 
    span1.className="check"; 
    label.appendChild(span1); 
    var span2=document.createElement('span'); 
    span2.className="box"; 
    label.appendChild(span2); 
      label.appendChild(document.createTextNode(data.category_name[i].category_name)); 
    var div= document.createElement('div'); 
    div.appendChild(label); 
    div.appendChild(checkbox); 
    place.appendChild(div); 
}