通過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的建議！