Question

I want create a ajax search in laravel 5.2 and value echo table tr
bt how can i done my work??

我的代码是好的bt不是echo table tr ..请帮助我，我想在laravel 5.2和值echo表tr中创建一个ajax搜索那我怎么能完成我的工作？我的代码还行，但不是echo table tr ..请帮帮我 Ajax搜索

            </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);


        }

Answer 1

有很多地方需要更改代码。

我假设您想通过Ajax填充带有Student信息的TABLE吗？但是你已经编写了代码，好像会有一个全视图渲染。你不应该。
根据您的代码，即使它返回结果，结果也会填充到您的SPAN元素<span id="result"></span>而不是TABLE
对于Ajax请求，您应该返回JSON响应，而不是＆＃39; View＆＃39;。参考：https://laravel.com/docs/5.2/responses#json-responses

最好引用一些基于Ajax的操作的代码，以便您明白这一点。

请参阅以下博客文章，这些文章将帮助您通过Laravel了解有关Ajax请求的清晰概念。

http://www.tutorials.kode-blog.com/laravel-5-ajax-tutorial

注意：我只有一个建议。截至目前，您正在使用XMLHttp对象进行Ajax处理和普通Javascript。如果你可以使用jQuery会更好，这将帮助你编写更好的Ajax代码以及以更好的方式处理Ajax响应。

Answer 2

将您的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>

现在创建这个student-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调用会让你的控制器找到数据并将其返回到你的ajax函数将放入＆＃39;结果的视图中。 div完成时。

如何在laravel 5.2中创建ajax搜索

2 个答案: