Question

我有一个Symfony应用程序，允许对某些事件进行CRUD操作并搜索它们。我得到的问题是在尝试获取结果时，我搜索显示而不刷新页面。这是我第一次使用ajax，我认为这个功能有问题。当我在任何事件名称中搜索单词时，页面不会刷新，并且显示未定义而不是显示条目。我感谢任何帮助！

这是来自Controller的方法：

public function ajaxListAction(Request $request){

        //fetch the data from the database and pass it to the view
        $em = $this->getDoctrine()->getManager();
        $searchTerm = $request->get('search');

        $form = $this->createFormBuilder()
        ->add('search', SubmitType::class, array('label' => 'Search', 'attr' => array('class' => 'btn btn-primary', 'style' => 'margin-bottom:15px')))->getForm();

        $organizer = array();
        if($searchTerm == ''){
            $organizer = $this->getDoctrine()->getRepository('AppBundle:Organizer')->findAll();
        }

        elseif ($request->getMethod() == 'GET') {
            $form->handleRequest($request);
            $em = $this->getDoctrine()->getManager();
            $organizer = $em->getRepository('AppBundle:Organizer')->findAllOrderedByName($searchTerm);
        }

        $response = new JsonResponse();
        $results = array();

        foreach ($organizer as $value) {
            $results[] = json_encode($value);
        }

        return $response->setData(array(
            'results' => $results
        ));
    }

以及搜索脚本：

    $(document).ready( function(event) {
    $("#search").submit(function(event) {
        event.preventDefault(); //prvent default submission event

        $form = $(this);

        var data  = $('#search_term').val();

        $.ajax({
            url: '/ajax',
            type: "GET",
            data: {'search' : data },
            success: function(response){
                var output = '';
                for (var i = 0; i < response.length; i++) {
                    output[i] = output + response;
                }
                $('#ajax_results').html('<tr><td>' + response.id + '</td></tr>' + '<tr><td>' + response.name + '</td></tr>' + '<tr><td>' + response.dueDate + '</td></tr>');
            }
        })

    });
});

和用于显示数据的index.html.twig文件：

{% extends 'base.html.twig' %}

{% block body %}
    <h2 class="page-header"> Latest events </h2>
<form id="search" method="GET" action="">
        <input type="text" name="search" id="search_term" />
        <input type="submit" name="submit" value="Search" />
</form>
    <hr />
    <table  class="table table-striped">
         <thead> 
         <tr> 
             <th>#</th> 
             <th>Event</th> 
             <th>Due Date</th>
             <th></th>
         </tr>
         </thead> 

         <tbody id="ajax_results"> 
         {% for Events in organizer %}
         <tr> 
             <th scope="row">{{Events.id}}</th>
             <td>{{Events.name}}</td>
             <td>{{Events.dueDate|date('j F, Y, g:i a')}}</td>
             <td>
             <a href="/organize/details/{{Events.id}}" class="btn btn-success">View</a>
             <a href="/organize/edit/{{Events.id}}" class="btn btn-default">Edit</a>
             <a href="/organize/delete/{{Events.id}}" class="btn btn-danger">Delete</a>
             </td>
         </tr>

         {% endfor %}

    <table class="table table-striped">

        {% if organizer|length > 0  %}
           {% for items in organizer %}

           {% endfor %}
        {% else %}
                <tr>
                   <td colspan="2">No matching results found!</td>
                </tr>
        {% endif %}
    </table>
         </tbody> 
    </table>
{% endblock %}

Answer 1

让我们先尝试重构你的代码。也许它会让你接近解决方案。

public function ajaxListAction(Request $request){

    $searchTerm = $request->get('search');
    //don't need form here

    if($searchTerm == ''){
        $organizer = $this->getDoctrine()->getRepository('AppBundle:Organizer')->findAll();
    }else{
        //repository should search by searchterm in next step
        $organizer = $this->getDoctrine()->getRepository('AppBundle:Organizer')->findAllOrderedByName($searchTerm);
    }

    return new JsonResponse($organizer);
}

和javascript：

$(document).ready( function(event) {
    $("#search").submit(function(event) {
        event.preventDefault(); //prvent default submission event

        $form = $(this);

        var data  = $('#search_term').val();

        $.ajax({
            url: '/ajax',
            type: "GET",
            data: {'search' : data },
            success: function(response){
                $('#ajax_results').html('');
                $.each(response, function(key, value) {
                    console.log(key, value);
                    $('#ajax_results').append('<tr><td>' + response[key].id + '</td></tr>' + '<tr><td>' + response[key].name + '</td></tr>' + '<tr><td>' + response[key].dueDate + '</td></tr>');
                });

            }
        })

    });
});

请在提交搜索后告诉您在js控制台中看到了什么？

Answer 2

我设法让它发挥作用。问题是我没有在Entity文件的jsonSerialize（）方法中将所有字段发送到数组中，因此字段显示未定义。

我还完成了.js文件中的append方法，以便在ajax调用时复制整个标记。

感谢Rawburner的建议！

通过ajax调用搜索结果时未定义

2 个答案: