我尝试使用ajax在twig模板中更新PHP foreach循环的变量,但没有成功。
这是我的模板:
{% extends 'base.html.twig' %}
{% block content %}
<div class="uk-container uk-container-large">
<div class="uk-child-width-expand@s uk-text-center" uk-grid>
{% for article in articles %}
<div class="uk-width-1-6@xl uk-width-1-5@l uk-width-1-4@m uk-width-1-3@s">
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img id="image" src="{{ vich_uploader_asset(article, 'imageFile') | imagine_filter('article_thumb') }}" alt="{{ article.name }}">
</div>
<div class="uk-card-body">
<h3 id="name" class="uk-card-title">{{ article.name }}</h3>
<p id="description">{{ article.description | truncate(40) }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
这是我的javascript:
$.ajax({
type: 'GET',
url: Routing.generate("ajax_request"),
data: { brand: selectedBrand }
//dataType: 'json'
}).done(function (data) {
for (i=0;i<data.length;i++) {
$('#image').html(data[i].image);
$('#name').html(data[i].name);
$('#description').html(data[i].description);
}
})
由于我找到了一个有效的解决方案,但由于VichUploaderBundle我不知道如何显示图像,你有什么想法吗?
$.ajax({
type: 'GET',
url: Routing.generate("ajax_request"),
data: { brand: selectedBrand }
//dataType: 'json'
}).done(function (data) {
$('.uk-text-center').children().html('');
var htmlText = '';
for ( var key in data ) {
htmlText += '<div class="uk-width-1-6@xl uk-width-1-5@l uk-width-1-4@m uk-width-1-3@s">';
htmlText += '<div class="uk-card uk-card-default">';
htmlText += '<div class="uk-card-media-top">';
htmlText += "<img src='{{ vich_uploader_asset(article, \'imageFile\') | imagine_filter(\'article_thumb\') }}' alt='{{ article.name }}'>";
htmlText += '</div>';
htmlText += '<div class="uk-card-body">';
htmlText += '<h3 class="uk-card-title">' + data[key].name + '</h3>';
htmlText += '<p>' + data[key].description + '</p>';
htmlText += '</div>';
htmlText += '</div>';
htmlText += '</div>';
}
$('.uk-text-center').html(htmlText);
})
这是我的ajax函数的“完成”承诺中我的JSON数据的调试:
[
{"id":207,"name":"article 5","category":"sweat","brand":"adidas","model":"boze","gender":"homme","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id ultricies eros. Pellentesque habitant morbi tristique senectus et netus et.","quantity":61,"size":"M","price":34,"image":"ceinture.jpg","imageSize":null,"added":{"date":"2017-10-17 01:33:57.000000","timezone_type":3,"timezone":"UTC"},"updated":null,"deleted":null,"sold":null},
{"id":209,"name":"article 7","category":"sous-vêtements","brand":"adidas","model":"running","gender":"femme","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id ultricies eros. Pellentesque habitant morbi tristique senectus et netus et.","quantity":53,"size":"M","price":100,"image":"IMG_7846.jpg","imageSize":null,"added":{"date":"2017-10-17 01:33:57.000000","timezone_type":3,"timezone":"UTC"},"updated":null,"deleted":null,"sold":null},
{"id":220,"name":"article 18","category":"chaussures","brand":"adidas","model":"running","gender":"homme","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id ultricies eros. Pellentesque habitant morbi tristique senectus et netus et.","quantity":3,"size":"M","price":14,"image":"black_sweat.jpg","imageSize":null,"added":{"date":"2017-10-17 01:33:57.000000","timezone_type":3,"timezone":"UTC"},"updated":null,"deleted":null,"sold":null},
{"id":229,"name":"article 27","category":"sweat","brand":"adidas","model":"boze","gender":"femme","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id ultricies eros. Pellentesque habitant morbi tristique senectus et netus et.","quantity":54,"size":"M","price":63,"image":"blue_jeans.jpg","imageSize":null,"added":{"date":"2017-10-17 01:33:57.000000","timezone_type":3,"timezone":"UTC"},"updated":null,"deleted":null,"sold":null},
{"id":231,"name":"article 29","category":"pantalons","brand":"adidas","model":"smoked","gender":"femme","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id ultricies eros. Pellentesque habitant morbi tristique senectus et netus et.","quantity":96,"size":"L","price":16,"image":"black_sweat.jpg","imageSize":null,"added":{"date":"2017-10-17 01:33:57.000000","timezone_type":3,"timezone":"UTC"},"updated":null,"deleted":null,"sold":null},
{"id":232,"name":"article 30","category":"chaussures","brand":"adidas","model":"boze","gender":"homme","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id ultricies eros. Pellentesque habitant morbi tristique senectus et netus et.","quantity":99,"size":"XXL","price":56,"image":"black_pants.jpg","imageSize":null,"added":{"date":"2017-10-17 01:33:57.000000","timezone_type":3,"timezone":"UTC"},"updated":null,"deleted":null,"sold":null}
]