标签：cdn 成功 请求方式 三级 col oar use success name
三级联动表:http://m.caomeipi.com/（鹏鹏）
路由:
//省份 Route::get(‘province‘,‘PortController@province‘); //市 Route::get(‘city‘,‘PortController@city‘); //区 Route::get(‘area‘,‘PortController@area‘);
控制器:
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Facades\DB; class PortController extends Controller { //查询省份 public function province(Request $request) { $province = DB::table(‘china_area‘)->where(‘parent_id‘,1)->get(); return view(‘port/china‘,[‘province‘=>$province]); } //查询市 public function city(Request $request) { $province = $request[‘province‘]; $city = DB::table(‘china_area‘)->where(‘parent_id‘,‘=‘,$province)->get()->toArray(); return json_encode([‘status‘ => 0, ‘data‘ => $city]); } //查询区 public function area(Request $request) { $city = $request[‘city‘]; $area = DB::table(‘china_area‘)->where(‘parent_id‘,‘=‘,$city)->get()->toArray(); return json_encode([‘status‘ => 0, ‘data‘ => $area]); } }
视图层:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<select class="province">
<option value="0">==请选择省==</option>
@foreach($province as $item)
<option value="{{ $item->id }}">{{ $item->name }}</option>
@endforeach
</select>
<select class="city">
<option value="0">==市==</option>
</select>
<select class="area">
<option value="0">==区/县==</option>
</select>
</body>
</html>
<script type="application/javascript">
$(function() {
//当省选项值发生变化的时候，发送ajax请求，获取对应的市区信息，并渲染
$(‘.province‘).change(function() {
var province = $(this).val();
$.ajax({
//请求方式
type: "get",
//请求的媒体类型
contentType: "application/json;charset=UTF-8",
//请求地址
url: "city",
//数据，json字符串
data: {
"province": province
},
//请求成功
dataType: "json",
success: function(result) {
//console.log(result)
if (result.status == 0) {
var citys = result.data;
var optionstr = "<option value=‘0‘>==市==</option>";
//渲染city选择框
for (var i = 0; i < citys.length; i++) {
var city = citys[i];
optionstr += "<option value=‘" + city.id + "‘>" + city.name + "</option>";
}
$(‘.city‘).html(optionstr);
} else {
alert(result.message);
}
},
//请求失败，包含具体的错误信息
error: function(e) {
console.log(e.status);
console.log(e.responseText);
}
});
})
$(‘.city‘).change(function() {
var city = $(this).val();
console.log(city);
$.ajax({
//请求方式
type: "get",
//请求的媒体类型
contentType: "application/json;charset=UTF-8",
//请求地址
url: "area",
//数据，json字符串
data: {
"city": city
},
//请求成功
dataType: "json",
success: function(result) {
//console.log(result)
if (result.status == 0) {
var cityss = result.data;
var optionstr = "<option value=‘0‘>==市==</option>";
//渲染city选择框
for (var i = 0; i < cityss.length; i++) {
var city = cityss[i];
optionstr += "<option value=‘" + city.id + "‘>" + city.name + "</option>";
}
$(‘.area‘).html(optionstr);
} else {
alert(result.message);
}
},
});
})
})
</script>
效果如图所示:
标签：cdn 成功 请求方式 三级 col oar use success name
原文地址：https://www.cnblogs.com/fsp69/p/13919624.html
