I'm using AJAX to transfer data(text, link, img link) from server to front-end in JSON format. The final layout can be 4 types based on the JSON data.
e.g. I want different layout(CSS) for different categories of product. Suppose there're only shoes and clothes categories...
- Shoes: Larger title(100px), white font-color
- Clothes: Medium title(80px), black font-color
- Shorts: Small title(50px), green font-color
To make this happen, I define new variables "category_id" at server to identify the product category and put if else function inside the AJAX success function: (if this item is shoes, category_id is 1. For clothes, the category_id is 2, and the category_id is 3 for shorts.)
Inside the js:
$.ajax({
url:'http://localhost:8080/',
dataType:'json',
type:'get',
success: function(result){
console.log(result);
$("#product_title").html(result.title);
$("#product_img").attr("src",result.imageURL);
console.log(result.category_id);
if(result.category_id == 1){
$("#product_title").css("font-size","100px")
$("#product_title").css("color","white")
}
else if(result.category_id ==2){
$("#product_title").css("font-size","80px")
$("#product_title").css("color","black")
}
else{
$("#product_title").css("font-size","50px")
$("#product_title").css("color","green")
}},
It actually did what I want, however it load so slow especially if I have over 4 categories.
I know the conditional statement slower the loading speed, but don't know how to improve it....
I'm thinking that is that possible to create some template to define the stuff inside the if else function first to make it load faster? or any better way?
Aucun commentaire:
Enregistrer un commentaire