Symfony JQuery 对 HTML 的响应

Question

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>

Answer 1

这应该从您的 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>

Answer 2

如果您的搜索端点已经正常工作，那么，在您的 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);
  }
}