首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Symfony JQuery对超文本标记语言的响应

Symfony JQuery对超文本标记语言的响应
EN

Stack Overflow用户
提问于 2019-03-13 05:32:16
回答 2查看 71关注 0票数 2

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>
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 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 + idid="",然后您只需循环您的数据响应,并检查它是否包含过滤后的字符串。

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>

票数 2
EN

Stack Overflow用户

发布于 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);
  }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55130947

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档