Laravel依赖选择框与Ajax

时间:2016-09-01 06:41:10

标签: json ajax laravel

我在Laravel中使用Ajax创建了3个相关的选择框(使用MySQL代替数组来复制原始项目中的代码):https://github.com/grigore16/laravel_select_boxes。它只有一个视图和一个控制器。 它通常工作正常,但如果我刷新多次,我得到500内部服务器错误(在Chrome的控制台)和从jQuery我看到错误是:xhr.send(options.hasContent&& options.data || null) 。在较慢的计算机中,错误更常见。 请告诉我代码是否正常! 这是观点:

<table class='table table-bordered'>
    <tr>
        <td>Country</td>
        <td>City</td>
        <td>Street</td>
    </tr>
    <tr>
        <td>
            <select id="country" name="country">
                <option selected>Germany</option>
            </select>
        </td>
        <td>
            <select id="city" name="city">
                <option selected>Hamburg</option>
            </select>
        </td>
        <td>
            <select id="street" name="street">
                <option selected>h1</option>
            </select>
        </td>
    </tr>
</table>
<div>
<script>
    var present_country = 'Germany';
    var present_city = 'Hamburg';
    var present_street = 'h1';

    $(document).ready(function(){

        $.ajax({
            url: 'http://localhost/laravel_select_boxes/public/ajax',
            method: "GET", 
            data: {countries:'test'},
            success: function (data) {
                 $(data.countries).each(function(index, country) {
                    if(country !== present_country){
                         $("#country").append(new Option(country));
                    }
                });

                var country = $('#country').val();
                $.ajax({
                    url: 'http://localhost/laravel_select_boxes/public/ajax',
                    method: "GET", 
                    data: {country:country},
                    success: function (data) {
                        $(data.cities).each(function(index, city) {
                            if(city !== present_city){
                                 $("#city").append(new Option(city));
                            }
                        });

                        var city = $('#city').val();
                        $.ajax({
                            url: 'http://localhost/laravel_select_boxes/public/ajax',
                            method: "GET", 
                            data: {city:city},
                            success: function (data) {
                                 $(data.streets).each(function(index, street) {
                                    if(street !== present_street){
                                         $("#street").append(new Option(street));
                                    }
                                });
                            }
                        });
                    }
                });
            }

        });

        $("#country").change(function() {

            $('#city').empty();
            $('#street').empty();

            var country = $('#country').val();
            $.ajax({
                url: 'http://localhost/laravel_select_boxes/public/ajax',
                method: "GET", 
                data: {country:country},
                success: function (data) {
                     $(data.cities).each(function(index, city) {
                        $("#city").append(new Option(city));
                    });

                    var city = $('#city').val();
                    $.ajax({
                        url: 'http://localhost/laravel_select_boxes/public/ajax',
                        method: "GET", 
                        data: {city:city},
                        success: function (data) {
                             $(data.streets).each(function(index, street) {
                                $("#street").append(new Option(street));
                            });
                        }
                    });
                }
            });
        });

        $("#city").change(function() {
            $('#street').empty();
            var city = $('#city').val();
            $.ajax({
                url: 'http://localhost/laravel_select_boxes/public/ajax',
                method: "GET", 
                data: {city:city},
                success: function (data) {
                     $(data.streets).each(function(index, street) {
                        $("#street").append(new Option(street));
                    });
                }
            });
        });
    });
</script>

这是控制器:

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;

class AjaxController extends Controller
{

public function index(Request $request)
{
    if($request['countries']){

        $countries = ['Germany', 'France'];
        return response()->json(['countries'=>$countries]); 
    }

    if($request['country']){
        if($request['country'] === 'Germany'){
            $cities = ['Hamburg', 'Berlin'];
        }
        if($request['country'] === 'France'){
            $cities = ['Paris', 'Lion'];
        }

        return response()->json(['cities'=>$cities]);   
    }

    if($request['city']){

        if($request['city'] === 'Hamburg'){
            $streets = ['h1', 'h2', 'h3'];
        }
        if($request['city'] === 'Berlin'){
            $streets = ['b1', 'b2', 'b3'];
        }
        if($request['city'] === 'Paris'){
            $streets = ['p1', 'p2', 'p3'];
        }
        if($request['city'] === 'Lion'){
            $streets = ['l1', 'l2', 'l3'];
        }
        return response()->json(['streets'=>$streets]);
    }
}
}

非常感谢!

0 个答案:

没有答案