Question

我使用symnfony并通过参数为搜索实体提供表单，但是当提交表单时我的页面重新加载，我不知道在填写字段和表单下时如何实现搜索表单我有没有重新加载页面的结果，比如写提交了一些单词，并在此时更新块下结果

这个我的表单带有动作，动作等待获取参数并在此视图中使用表单和结果进行渲染

    <div class="filters" id="filter_form">
    <form action="{{ path('outbound_invoices') }}" method="get">
        <div class="choice-group" role="group" data-toggle="buttons">
            <label class="btn active">
                <input type="radio" name="status" value={{ status_draft }} checked="checked">{{ status_draft|trans }}
            </label>
            <label class="btn">
                <input type="radio" name="status" value={{ status_sent }}>{{ status_sent|trans }}
            </label>
            <label class="btn">
                <input type="radio" name="status" value={{ status_paid }}>{{ status_paid|trans }}
            </label>
        </div>

        <div class="choice-group" role="group" data-toggle="buttons">
            <label class="btn active">
                <input type="radio" name="type" value="all" checked="checked">all
            </label>
            <label class="btn">
                <input type="radio" name="type" value="contract">contract
            </label>
            <label class="btn">
                <input type="radio" name="type" value="other">other
            </label>
        </div>

        <input name="search" id="filter-employees" placeholder="{{ 'search'|trans }}" class="form-control">
        <p>from Date: <input type="text" name="from_date" id="from_datepicker" dataformatas="dd-mm-yyyy"></p>
        <p>to Date: <input type="text" name="to_date" id="to_datepicker" dataformatas="dd-mm-yyyy"></p>
        <input type="submit" value="Submit">
    </form>
</div>
// block result
<table class="table">
    <thead>
    <tr>
        <th>
            {% trans %}invoice_number_short{% endtrans %}
        </th>
    </tr>
    </thead>
    <tbody>
        {# @var outboundInvoice \AppBundle\Entity\OutboundInvoice#}
        {% for outboundInvoice in outboundInvoices %}
        <tr class="clickable" data-href="{{ path('outbound_invoices_show', {'id': outboundInvoice.id}) }}">
            <td>
                {{ outboundInvoice.invoiceNumber }}
            </td>
            {% endfor %}
        </tr>
    </tbody>
</table>

在行动中我只是为查找实体创建查询构建器并在模板中呈现。如何在没有重新加载和实时搜索的情况下使用ajax实现它？

Answer 1

以下是使用jQuery通过ajax发布表单的示例：

var form = $('#my-form');

$.post(
    form.prop('action'),   //action url
    form.serializeArray(), //serialized form data
    function(result){      //callback
       console.log(result);
    }
);

Answer 2

像往常一样使用AJAX：

//add jquery here
$('#filter-employees').click(function(e){
    e.preventDefault();
    $.ajax({
        action:"/invoices"
        //...
    }).done(function(resp));
});

然后在控制器操作中，您需要验证请求是否是XMLHttpRequest请求，并相应地创建功能。

/**
 * @Route("/invoices", name="outbound_invoices")
 */
public function processAction(Request $request)
{
    if ($request->isXmlHttpRequest()) {
        //do work
    }

    return $this->redirectToRoute('whatever');
}

OBS：我建议您将Angular用于此类事情。

Symfony serach表单没有重新加载页面

2 个答案: