Ajax附加从PHP接收的数组元素

时间:2016-12-20 05:57:43

标签: javascript php jquery ajax laravel

来自这里的问候!!

我正在开发一个小型Web应用程序,使用Laravel PHP MVC框架从产品数据库模式中检索产品。

我在控制器端开发了一个代码

 public function getfields($f1,$f2,$f3){    
 if($f1 != "Null" || $f1  != ""){
                    $getting_fields_2 = DB::connection('wholesaler')->table('product')
                    ->where('product.MasterID',$masterid)->where('product.Field1',$f1)
                    ->join('stock','stock.RefProduct','=','product.ID')
                    ->select('product.Field2','product.ID as productID','product.Field3','stock.AvailableStock as AvailableStock')
                    ->distinct('product.Field2')
                    ->get();

                    foreach($getting_fields_2 as $getting_field_2){
                      $set_field_2 = $getting_field_2->Field2;
                      $set_product_id = $getting_field_2->productID;
                      $get_field3 = $getting_field_2->Field3;
                      $set_available_stock = $getting_field_2->AvailableStock;
                      $set_field_echo2[] ='<a class="ui basic label" onclick="variant_desc(this); selectProd(this);" data-f1="'.$f1.'" data-f2="'.$set_field_2.'" data-available-stock="'.$set_available_stock.'" data-proid="'.$set_product_id.'" data="'.$masterid.'">'.$set_field_2.'</a><input type="hidden" name="checkSuccField" id="inretcheckSuccField" data-f="'.$set_field_2.'" value="'.$get_field3.'">';
                      //$count['count']= $count++;
                    }
                  }
                  if($f1 != "" || $f2 != ""){
                    $getting_fields_3 = DB::connection('wholesaler')->table('product')
                    ->join('stock','stock.RefProduct','=','product.ID')
                    ->where('product.MasterID',$masterid)->where('product.Field1',$f1)->where('product.Field2',$f2)
                    ->select('product.Field3','product.Field4','product.ID as productID','stock.AvailableStock as AvailableStock')
                    ->distinct('product.Field3')
                    ->get();
                    foreach($getting_fields_3 as $getting_field_3){
                      $set_field_3 = $getting_field_3->Field3;
                      $get_field4 = $getting_field_3->Field4;
                      $set_product_id = $getting_field_3->productID;
                      $set_available_stock = $getting_field_3->AvailableStock;
                      if($set_field_3 != ""){
                        $set_field_echo2[] ='<p></p><a class="ui basic label" onclick="variant_desc(this); selectProd(this); selectProd(this);" data-f1="'.$f1.'" data-f2="'.$f2.'" data-f3="'.$set_field_3.'" data-available-stock="'.$set_available_stock.'" data-proid="'.$set_product_id.'" data="'.$masterid.'">'.$set_field_3.'</a><input type="hidden" name="checkSuccField" id="inretcheckSuccField" data-f="'.$set_field_3.'" value="'.$get_field4.'">';
                      }
                    }
                          $data = array($set_field_echo2);
                          echo json_encode($data,JSON_PRETTY_PRINT);
                      }

现在在客户端我写了一个ajax代码

function variant_desc(elem,id)
{

    var value = elem.value;
    var variant_id    = elem.getAttribute("data-proid");
    var sku = elem.class;
    var masterid = elem.getAttribute("data");
    var f1 = elem.getAttribute("data-f1");
    var f2 = elem.getAttribute("data-f2");
    var f3 = elem.getAttribute("data-f3");
    var f4 = elem.getAttribute("data-f4");
    var f5 = elem.getAttribute("data-f5");
    var f6 = elem.getAttribute("data-f6");
    var count = elem.getAttribute("data-count");
    var beforeselection = $("#inretclaselection").val();
    $("#"+beforeselection).attr('class', 'ui basic label');
    $("#inretclaselection").val(id);


    elem.className = "ui grey label";
    if(variant_id=="")
                  {
                      return false;
                  }
                  else
                  {
                    var xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function()
                      {
                        if (xhttp.readyState == 4 && xhttp.status == 200)
                        {
                            var fields = JSON.parse(xhttp.responseText);
                            console.log(fields);
                            if(document.getElementById("prodgetFields2").innerHTML != ""){
                              document.getElementById("prodgetFields2").innerHTML = "";
                            }
                            for(i=0;i<fields[0].length;i++){
                              document.getElementById('divallfirstfields').style.display =  "none";
                             const fieldDivfields = document.getElementById("prodgetFields2");
                             //fieldDivfields.append(fields[0][i]);;
                             fieldDivfields.insertAdjacentHTML('beforeend',fields[0][i]);;
                            }
                        }
                    };
                        xhttp.open("GET", "../fetchallField1"+'/'+masterid+'/'+variant_id+'/'+f1+'/'+f2+'/'+f3+'/'+f4+'/'+f5+'/'+f6, true);
                        count = 0;
                        xhttp.send();
                  }
}

当我执行此操作时,我确实收到了如下所示的输出:

result from ajax

现在,每当我点击标签时,它都应加载其余数据,例如

如果我点击红色,则下一个元素将类似于L,M,M,XL,

当我点击L时,它会加载结果,FEMALE

但唯一的问题是,我不想加载整个元素,而只是想附加新元素,以便我可以保留选择以及新数据而不是加载整个元素数组

在控制台端,我收到结果为

Array[4]
0
:
"<a class="ui basic label" onclick="variant_desc(this); selectProd(this);" data-f1="Red" data-f2="L" data-available-stock="10" data-proid="16ccda40-b77d-11e6-8ced-0d78267997bf" data="16ccd740-b77d-11e6-bb13-e7aca6ba3ba9">L</a><input type="hidden" name="checkSuccField" id="inretcheckSuccField" data-f="L" value="Female">"
1
:
"<a class="ui basic label" onclick="variant_desc(this); selectProd(this);" data-f1="Red" data-f2="M" data-available-stock="20" data-proid="25cf64f0-b8ab-11e6-a94c-d13a8ad936ba" data="16ccd740-b77d-11e6-bb13-e7aca6ba3ba9">M</a><input type="hidden" name="checkSuccField" id="inretcheckSuccField" data-f="M" value="Female">"
2
:
"<a class="ui basic label" onclick="variant_desc(this); selectProd(this);" data-f1="Red" data-f2="M" data-available-stock="10" data-proid="8ae7f970-b8ab-11e6-b94e-bb25604583f0" data="16ccd740-b77d-11e6-bb13-e7aca6ba3ba9">M</a><input type="hidden" name="checkSuccField" id="inretcheckSuccField" data-f="M" value="Female">"
3
:
"<a class="ui basic label" onclick="variant_desc(this); selectProd(this);" data-f1="Red" data-f2="XL" data-available-stock="10" data-proid="a2d3ee90-b8ad-11e6-b529-0b1d445e7c57" data="16ccd740-b77d-11e6-bb13-e7aca6ba3ba9">XL</a><input type="hidden" name="checkSuccField" id="inretcheckSuccField" data-f="XL" value="Female">"
length
:
4

0 个答案:

没有答案