我在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]);
}
}
}
非常感谢!