通过ajax调用搜索结果时获取undefined

Question

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

下面是来自控制器的方法：

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

我设法使它工作。问题在于我没有将所有字段发送到实体文件的jsonSerialize（）方法中的数组中，因此字段显示为未定义。

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

感谢Rawburner的建议！