如何在ajax响应后填充无线电div?

时间:2018-01-31 08:10:35

标签: javascript php jquery ajax

Html Div我想在其中附加我的html:

<div class="col-md-12" style="border:1px solid green;height: 20px;"id="eng_skills"></div> 

jQuery和AJAX代码。响应包含我要在我的上层html中附加的HTML:

$(document).ready(function(){
   var jobid=$("#eng_jobtitle").val();
   var worker_id=$("#worker_id").val();
   //alert(jobid);
   //alert(worker_id);
    $.ajax({

          type: 'POST',
          url: '/admin/listing-details/get_skills',
          data: {
                "_token": "{{ csrf_token() }}",
                "job_title_id" :jobid,
                "worker_id" : worker_id
          },
          success: function (response)
           {

             html+='<div class="form-group">';
             html+='<span class="col-md-6 col-xs-12  no-padding set_text">';
             $.each(response,function(i,val){
              html+='<label class="">'+val.skill_eng+'</label></span>';
              html+='<input type="radio"  name="'+ i +'" id="'+ i +'"/>';


             })
             html+='<span class="col-md-6 col-xs-12 set_text">';
             html+='<input type="radio" name="cooking"><label class="">Yes</label>';
             html+='<input type="radio" name="cooking"><label class="">No</label>';
             html+='</span>';
             html+='</div>';
            $('#eng_skills').html(html);

           }
  })
})

我得到的Ajax是:

{"status":true,
"result":
    [
{"id":1,"job_id":1,"skill_eng":"cleaning","skill_arb":"\u062a\u0646\u0638\u064a\u0641","ordering":1,"added_date":"2018-01-31 00:00:00"},   
     {"id":2,"job_id":1,"skill_eng":"cooking","skill_arb":"\u062a\u0646\u0638\u064a\u0641","ordering":2,"added_date":"2018-01-31 00:00:00"},      
     {"id":3,"job_id":1,"skill_eng":"utensils washing","skill_arb":"\u0623\u0648\u0627\u0646\u064a \u0627\u0644\u063a\u0633\u064a\u0644","ordering":3,"added_date":"2018-01-31 00:00:00"},
     {"id":4,"job_id":1,"skill_eng":"cloths washing","skill_arb":"\u063a\u0633\u0644 \u0627\u0644\u0645\u0644\u0627\u0628\u0633","ordering":4,"added_date":"2018-01-31 00:00:00"}
]
}

创建响应后,我无法按照自己的意愿生成输入类型的广播。它没有附加在HTML上,为什么会发生这种情况?

2 个答案:

答案 0 :(得分:4)

你正在循环的数组是错误的

根据回复[&#39;结果&#39;]

进行操作

作为

$.each(response['result'],function(i,val)){
     //code inside
 })

还定义var html =&#39;&#39 ;;在开始

答案 1 :(得分:1)

您必须遍历response.result

$.each(response.result,function(i,val){