来自这里的问候!!
我正在开发一个小型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();
}
}
当我执行此操作时,我确实收到了如下所示的输出:
现在,每当我点击标签时,它都应加载其余数据,例如
如果我点击红色,则下一个元素将类似于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