坚持Ajax调用PATH url

Question

Dependent Dropdown not working for PATH url in Ajax. 依赖下拉列表不适用于Ajax中的PATH URL。

Normal URL is working fine for Ajax call eg. 普通URL适用于Ajax调用，例如。 " http://localhost/ajax " but when adding PATH to url eg. “ http：// localhost / ajax ”但在将URL添加到url时例如。 " http://localhost/ajax/drop " it's not working. “ http：// localhost / ajax / drop ”它不起作用。

Where i'm doing wrong? 哪里我做错了？

View: 视图：

<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>

Controller: 控制器：

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: 路线：

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

Making dependent dropdown for hardware with it's components. 使用它的组件对硬件进行依赖下拉。

Answer 1

Make some changes in your js code as per below: 根据以下内容对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>

坚持Ajax调用PATH url

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-06-03 04:42:21

坚持Ajax调用PATH url

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-06-03 04:42:21

解决方案1
0 已采纳 2019-06-03 04:42:21