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>

我怎样才能 return JSON API 的结果到我的 html 页面？

我在 JS 中试过了。我在我的浏览器中得到了 Hello World。但是如何以 table 形式将 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

这应该 return 来自您 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);
}

如果您想根据输入字符串对 table 和 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);
  }
}

Symfony JQuery 对 HTML 的回应

Symfony JQuery response to HTML

forms

ajax

jquery

symfony

jquery-select2