如何使用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 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>

我想你在for循环中犯了一个错误。如果处理的是数组，请使用'<'而不是'<='。

您在循环中创建了div check-awesom。但是你必须声明它不在循环中。我在函数中使用了回调变量，所以当你的请求成功时，函数将调用函数参数，并在参数

   $(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
            })
        });

p。正如@Tri所说，你在for条件中也写了<=而不是<。

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

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);
}