2016-03-10 6 views
0
I want create a ajax search in laravel 5.2 and value echo table tr 
bt how can i done my work?? 

мой код нормально Б.Т. не эхо таблицы tr..please помочь мне, что я хочу создать поиск АЯКС в Laravel 5.2 и значением эхо таблицы т.р. Ы, как я могу сделать мой Работа?? мой код нормально Б.Т. не эхо таблицы tr..please помочь мне
Ajax Search Как я могу создать Ajax поиск в Laravel 5,2

  </head> 
      <body > 
       <div class="row"> 
        <div class="col-md-6 col-md-offset-3"> 
         <form> 
          <span>Given Text</span> 

          <input type="text" id="search_text" onkeyup="search_data(this.value, 'result');"> 

          <br/> 
          <br/> 
          <hr/> 
          <span id="result"></span> 

         </form> 

        </div> 
        <table style="width:100%"> 
       <tr> 
        <th>Std Name</th> 
        <th>Std Email</th> 
        <th>Std Number</th> 
       </tr> 
         <?php 
         if (isset($tbl)): 
          foreach ($tbl as $std_value): 
           ?> 
           <tr> 
            <td><?php echo $std_value->student_name ?></td> 
            <td><?php echo $std_value->student_email ?></td> 
            <td><?php echo $std_value->student_name ?></td> 
           </tr> 
          <?php endforeach; 
         endif; 
         ?> 
        </table> 
       </div> 
       <script type="text/javascript"> 
        <!-- 
       //Create a boolean variable to check for a valid Internet Explorer instance. 
        var xmlhttp = false; 
        //Check if we are using IE. 
        try { 
         //If the Javascript version is greater than 5. 
         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
         //alert(xmlhttp); 
         //alert ("You are using Microsoft Internet Explorer."); 
        } catch (e) { 
         //alert(e); 

         //If not, then use the older active x object. 
         try { 
          //If we are using Internet Explorer. 
          xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
          //alert ("You are using Microsoft Internet Explorer"); 
         } catch (E) { 
          //alert(E); 
          //Else we must be using a non-IE browser. 
          xmlhttp = false; 
         } 
        } 
        //If we are using a non-IE browser, create a javascript instance of the object. 
        //alert(typeof XMLHttpRequest); 
        if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { 
         xmlhttp = new XMLHttpRequest(); 
         //alert ("You are not using Microsoft Internet Explorer"); 
        } 
      function search_data(search_text, objID) 
        { 
         //alert(given_text); 
         //var obj = document.getElementById(objID); 
         serverPage = '{!! URL::to("/search-data")!!}?text=' + search_text; 
         xmlhttp.open("GET", serverPage); 
         xmlhttp.onreadystatechange = function() 
         { 
          //alert(xmlhttp.readyState); 
          //alert(xmlhttp.status); 
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
          { 
           //alert(xmlhttp.responseText); 
           document.getElementById(objID).innerHTML = xmlhttp.responseText; 
           //document.getElementById(objcw).innerHTML = xmlhttp.responseText; 
          } 
         } 
         xmlhttp.send(null); 
        } 

        //--> 
       </script> 
      </body> 
     </html> 
    //Controller 
    public function data_search() { 
      $search_text = $_GET['text']; 
      if($search_text==NULL){ 
       $data= Tbl_Student::all(); 

      } 
      else{ 
       $data=Tbl_Student::where('student_name','LIKE', '%'.$search_text.'%')->get(); 
      } 
      return view('ajax.ajax_search')->with('tbl',$data); 


     } 

ответ

0

Есть много мест, где необходимо изменить код.

  1. Я полагаю, что вы хотите заполнить ТАБЛИЦУ информацией о студентах через Ajax? Но вы написали Код, как будто будет рендеринг Full View. Вы не должны.
  2. В соответствии с вашим кодом, даже если она возвращает результат, результат будет получить заселен в вашем SPAN элемент <span id="result"></span> не таблица
  3. Для Ajax запросов вы должны вернуть JSON ответ, а не «Вид». Ref: https://laravel.com/docs/5.2/responses#json-responses

Было бы лучше, чтобы обратиться часть кода, где было сделано действия на основе Ajax, так что вы получите идею.

Подпишитесь на следующие сообщения в блоге, которые помогут вам получить четкое представление о запросах Ajax с помощью Laravel.

Примечание: Я только есть одно предложение. На данный момент вы используете объект XMLHttp для обработки Ajax и обычного Javascript. Было бы хорошо, если вы можете использовать jQuery, который поможет вам написать лучший код Ajax, а также обработать Ajax Response лучше.

+0

В чем разница между javascript ajax и jquery ajax ?? подскажите мне, чей путь прост. –

+0

Основополагающий принцип такой же, но с помощью Plain Javascript вам нужно сделать так, чтобы создать объект XHLHttp для разных версий браузеров и обработать запрос. jQuery делает все это для вашего тяжелого подъема и делает вашу жизнь легкой. Для примера, вся ваша функциональность JavaScript Ajax можно записать в JQuery, как '$ .ajax ({URL: "AJAX_CONTROLLER_URL", успех:. Функции (результат) { $ ("# ObjectId") HTML (результат); }}); –

0

Изменить HTML на что-то вроде этого

<body > 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-3"> 
      <form> 
       <span>Given Text</span> 
       <input type="text" id="search_text" onkeyup="search_data(this.value, 'result');"> 
       <br/> 
       <hr/> 
      </form> 
     </div> 
     <div id="table-results"> 
      @include('student-table') 
     </div> 
    </div> 

уведомления мы будем включать в себя еще один шаблон

<div id="table-results"> 
    @include('student-table') 
</div> 

Создать этот студент-table.blade.php файл

<table style="width:100%"> 
    <tr> 
     <th>Std Name</th> 
     <th>Std Email</th> 
     <th>Std Number</th> 
    </tr> 
    @foreach($results as $student) 
    <tr> 
     <td>{{ $student->student_name }}</td> 
     <td>{{ $student->student_email}}</td> 
     <td>{{ $student->student_number }}</td> 
    </tr> 
    @endforeach 
</table> 

Вот jQuery (гораздо проще, чем простой javascript)

<script type="text/javascript"> 
function search_data(search_value) { 
    $.ajax({ 
     url: '/search-data/' + search_value, 
     method: 'GET' 
    }).done(function(response){ 
     $('#table-results').html(response);   // put the returning html in the 'results' div 
    }); 
} 
</script> 

в контроллере, измените возвращение

return view('student-table')->with('results',$data); 

так, ваш Ajax вызов будет вызывать ваш контроллер, чтобы найти данные и вернуть его в представлении, которое ваша функция Аякса поместит в «результаты» div, когда он завершается.

Смежные вопросы