Jquery Symfony，如何集成Ajax来执行搜索而不使用数据库中的实体刷新页面？

我想做一个搜索功能，搜索结果显示时不需要刷新页面。我是Ajax和MVC框架的新手，所以我以前没有尝试过。我不知道从哪里开始这个功能，尤其是使用Symfony，所以任何帮助都将不胜感激

这是我的搜索表单，其中包含表数据的默认列表：

<div class="searchsubform">
    <form action="{{ path('searchno') }}" method="get">
        <input type="text" name="no" placeholder="Search by #" id="searchno"/>
        <button type="submit" name="submit">Search</button>
    </form>
</div>
<div id="sublist">
    <table id="showsub" class="tablesorter">
        <thead>
            <th>No. &uarr;&darr;</th>
            <th>Weight &uarr;&darr;</th>
            <th>Color &uarr;&darr;</th>
            <th>Dimensions &uarr;&darr;</th>
            <th>Qty &uarr;&darr;</th>
        </thead>
        {% for entity in entities %}
            <tr class="datarow" data-id="{{ entity.subid }}">
                <td>{{ entity.no }}</td>
                <td>{{ entity.weight }}</td>
                <td>{{ entity.color }}</td>
                <td>{{ entity.dimensions }}</td>
                <td>{{ entity.qty }}</td>
            </tr>
        {% endfor %}
    </table>
</div>

这是我用于搜索的控制器：

/**
 * @Route("/search/", name="searchdano")
 * @Template("Bundle:Search:index.html.twig")
 */
public function searchSubByNoAction(Request $request) {
    $no = $request->get('no');
    $em = $this->getDoctrine()->getRepository('Bundle:Sub');
    $entities = $em->searchSubByNo($no);

    return $this->render("Bundle:Search:index.html.twig", array(
            'entities' => $entities,
        ));
}

---

因此，现在当用户提交一个数字进行搜索时，页面将刷新并显示结果行。我需要它只显示结果而不刷新页面。我希望将结果显示定位在行的右侧，您将钩住表单提交事件并调用您的索引操作

$(".searchsubform form").on("submit", function(event) {
    // prevent page reload
    event.preventDefault();

    $.ajax({
        url: '{{ path('searchhome') }}',
        type: 'POST',
        success: function() {
            // perform dom update to show search results
        }
    });
});

查看jQuerys

.submit（）

以及

$.ajax

1）客户端：使用jquery发送ajax请求，如

2） 服务器端：

searchSubByNoAction（请求$Request）

：

2.1在方法上使用

@Route

注释，使用

默认值={“\u格式”=“json”}

2.2删除模板注释

2.3方法应该

返回新的响应（json_encode（$entities））

3） 客户端：获取响应并使用jquery动态填充tbl中的行

3.1）使用firebug或inspect element工具查看您从服务器获得的json内容
我是否向我的indexAction或我的searchSubByNoAction（）发送请求？您正在通过ajax向searchSubByNoAction方法发送请求，等待客户端的成功响应，并基于服务器返回的数据（searchSubByNoAction方法）在客户端重新填充表
$(".searchsubform form").on("submit", function(event) {
    // prevent page reload
    event.preventDefault();

    $.ajax({
        url: '{{ path('searchhome') }}',
        type: 'POST',
        success: function() {
            // perform dom update to show search results
        }
    });
});