在Ajax调用路径url时卡住
在Ajax调用路径url时卡住
提问于 2019-06-02 20:01:00
Dependent Dropdown不适用于Ajax中的路径url。
普通的URL对于Ajax调用来说工作得很好。"http://localhost/ajax“，但当添加路径到url时，例如。"http://localhost/ajax/drop“它不工作。
我哪里做错了？
查看：
<html>
<head>
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ asset('js/app.js') }}"></script>
</head>
<body>
<div class="container">
<h2>Dependent Dropdown</h2>
<div class="form-group">
<label for="hardware">Select Hardware:</label>
<select name="hardware" class="form-control">
<option value="">Choose Any one</option>
@foreach ($hardwares as $key => $value)
<option value="{{ $key }}">{{ $value }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="component">Selected Component:</label>
<select name="component" class="form-control" disabled>
<option>Component</option>
</select>
</div>
</div>
<script>
jQuery(document).ready(function ()
{
jQuery('select[name="hardware"]').on('change',function(){
var hardwareID = jQuery(this).val();
if(hardwareID)
{
jQuery.ajax({
url : 'autoselect/component/' +hardwareID,
type : "GET",
dataType : "json",
success:function(data)
{
console.log(data);
jQuery('select[name="component"]').empty();
jQuery.each(data, function(key,value){
$('select[name="component"]').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}
else
{
$('select[name="component"]').empty();
}
});
});
</script>
</body>
</html>控制器：
namespace App\Http\Controllers;
use Illuminate\Support\Facades\DB;
class AjaxController extends Controller
{
public function hardware()
{
$hardwares = DB::table('hardwares')->pluck("name", "id");
return view('index', compact('hardwares'));
}
public function component($id)
{
$components = DB::table("components")->where("hardwares_id", $id)->pluck("name", "id");
return json_encode($component);
}
}路由：
Route::get('ajax', 'AjaxController@hardware'); //This is working.
Route::get('ajax/drop', 'AjaxController@hardware'); //This is not working.
Route::get('autoselect/component/{id}', 'AjaxController@component');为硬件及其组件制作从属下拉列表。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-03 12:42:22
在js代码中进行一些修改，如下所示：
<script>
jQuery(document).ready(function (){
jQuery('select[name="hardware"]').on('change',function(){
var baseurl = window.location.protocol + "//" + window.location.host;
var hardwareID = jQuery(this).val();
if(hardwareID != ''){
jQuery.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
jQuery.ajax({
url : baseurl + '/autoselect/component/' +hardwareID,
type : "GET",
dataType : "json",
cache: false,
success:function(data) {
console.log(data);
jQuery('select[name="component"]').empty();
jQuery.each(data, function(key,value){
$('select[name="component"]').append('<option value="'+ value +'">'+ value +'</option>');
});
}
});
} else {
$('select[name="component"]').empty();
}
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56414808
复制相关文章
相似问题