JSON
{"results":[{"id":"1","text":"LogiLink USB Sync-und oplaadkabel iPod und iPhone 0,15m"},{"id":"2","text":"LogiLink USB-HUB 13-Port m. Netzteil zwart kunsstof"}]}
JS
<script>
$('.js-data-example-ajax').select2({
ajax: {
url: '/product/api/search',
dataType: 'json',
}
});
</script>
如何将JSON API的结果返回到我的html页面?
我在JS上试过了。我在浏览器中看到Hello World。但是如何将JSON响应以表格形式传递给我的浏览器呢?
success: function (data) {
$('#table_id').html("Hello <b>world</b>!");
}
细枝
<table class="table table-hover table-responsive">
<thead>
<tr>
<th>id</th>
<th>Title</th>
<th>SKU</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for product in products %}
<tr>
<td>
{{ product.id }}
</td>
<td>
{{ product.name }}
</td>
<td>
{{ product.sku }}
</td>
<td>
<a href="{{ path('app_product_getproduct', {'id': product.id}) }}" class="btn btn-success btn-sm" >
<span class="glyphicon glyphicon-pencil"></span>
</a>
<a href="{{ path('app_product_delete', {'id': product.id}) }}" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
发布于 2019-03-13 05:55:40
这将返回ajax请求中第一个条目中的文本元素。
$.ajax({
url: "/product/api/search",
success: (result) => {
$("#table_id").html(result.results[0].text);
}
});
如果您从成功函数获得hello world,则需要使用函数具有的data
参数,该参数应包含您的JSON。
success: function (data) {
$('#table_id').html(data.results[0].text);
}
如果希望使用jquery根据输入字符串对表进行排序,可以这样做。
我做了一个mcve。您需要为您可以获取的每个产品设置一个id,使用symfony设置一个名为product + id
的id=""
,然后您只需循环您的数据响应,并检查它是否包含过滤后的字符串。
let data = {
"results": [{
"id": "1",
"text": "LogiLink USB Sync-und oplaadkabel iPod und iPhone 0,15m"
}, {
"id": "2",
"text": "LogiLink USB-HUB 13-Port m. Netzteil zwart kunsstof"
}]
}
const filter = () => {
const searchStr = document.getElementById("inputfield").value;
data.results.forEach((result) => {
document.getElementById("product" + result.id).style.display = "none";
if (result.text.toLowerCase().includes(searchStr.toLowerCase())) {
document.getElementById("product" + result.id).style.display = "block";
}
});
}
<input id="inputfield" />
<button onclick="filter()">filter</button>
<br /><br />
<table class="table table-hover table-responsive">
<thead>
<tr>
<th>id</th>
<th>Title</th>
<th>SKU</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr id="product1">
<td>
1
</td>
<td>
LogiLink USB Sync-und oplaadkabel iPod und iPhone 0,15m
</td>
<td>
sku
</td>
<td>
<a href="{{ path('app_product_getproduct', {'id': product.id}) }}" class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<a href="{{ path('app_product_delete', {'id': product.id}) }}" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
<tr id="product2">
<td>
2
</td>
<td>
LogiLink USB-HUB 13-Port m. Netzteil zwart kunsstof
</td>
<td>
sku2
</td>
<td>
<a href="{{ path('app_product_getproduct', {'id': product.id}) }}" class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<a href="{{ path('app_product_delete', {'id': product.id}) }}" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
</tbody>
</table>
发布于 2019-03-13 16:06:45
如果您的搜索端点已经正常工作,那么在ajax回调中,您可以像这样遍历结果:
success: function (data) {
for (result in data.results) {
let newRow = '<tr><td>' + result.id + '</td><td>' + result.text + '</td></tr>';
$('#table_id tbody').append(newRow);
}
}
https://stackoverflow.com/questions/55130947
复制相似问题