Question

我想创建一个搜索功能，结果显示没有页面刷新。我是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>

我的默认索引操作，显示数据库中的所有数据：

/**
 * @return Response
 * @Route("/", name="searchhome")
 * @Template()
 */
public function indexAction() {
    $em = $this->getDoctrine()->getRepository('Bundle:Sub');
    $entities = $em->searchSub();

    return array('entities' => $entities,);
}

这是我搜索的控制器：

/**
 * @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,
        ));
}

现在，当用户提交要搜索的号码时，页面会刷新并显示结果行。我需要它只显示没有页面刷新的结果。我想将结果显示定位在行<tr class="datarow...上我在哪里挂钩ajax？

Answer 1

您挂钩表单提交事件并调用indexAction

$(".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() http://api.jquery.com/submit/以及$.ajax http://api.jquery.com/jQuery.ajax/。

Answer 2

1）客户端：使用jquery发送ajax请求，如"jQuery Ajax POST example with PHP"

2）服务器端：searchSubByNoAction(Request $request)：

2.1使用@Route

的方法使用defaults={"_format" = "json"}注释

2.2删除模板注释

2.3方法应return new Response(json_encode($entities));

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

3.1）使用firebug或inspect元素工具以查看从服务器获取的内容为json

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

2 个答案: