通过单击 laravel 5 上的链接发布 ajax 数据

Question

我是 ajax 和 laravel 5 的新手

我在点击链接时遇到了一些关于传递数据的问题，我会解释一下我想要实现的目标。

这里是我的 html 代码：

//this is the div that i want append with data foreach
<div id="warung-plain">
</div>

//and those code is links that when i click it will send ajax data
@foreach($kategoriwarung_all as $kategoriwarung)
    <li style="padding:5px 0px">
        <a class="kategori-warung" style="text-decoration:none;color:#5ca4a9" href="#">
           {{ $kategoriwarung->nama }}
        </a>
    </li>
 @endforeach

//this is a html code that i want plain in id="warung-plain" after get the foreach data
<div class="row" style="margin:3% 0px 0px 0px" id="">
@foreach($warung_has_kategoriwarungs[$category_fix] as $Warung)
    <div class="col-md-6" style="margin-bottom:0px;min-height:100px">
        <ul class="no-padding" style="display:inline-flex;list-style-type: none;width:100%;">
            <li>
                <img class="img-circle" src="assets/gambar_contoh/foto.jpg" style="height:60px;width:60px">
            </li>
            <li style="padding:0px 0px 0px 15px ;width:100%">
                <p class="heading-toko-font" style="font-size:18px;color:#606060">{{ $Warung->Warung->nama  }}</p>
                <span class="alamat-toko-font" style="font-size:14px;color:#BCBCBC"><?php echo $Warung['Warung']['alamat']; ?></span>
            </li>
        </ul>       
    </div>
@endforeach                        
</div>   

这是我的 js

<script>
    $(document).ready(function(){
        $(".kategori-warung").click(function(e){ 
            e.preventDefault();
            var category = $(e.target).text();

            jQuery.ajax({
                type: "POST",
                //after passing data category then system will append 
                //html code to id="warung-plain"
                url: "/ambil_kategori/{category}",
                data: {category: category},
                success: function(res) {
                    $('#warung-plain').load("/warung_plain/{category}");
                }
            });   
            $(".warung").fadeIn("slow").show();
            $("#nama-kategori").html(category);
            $(".warung-semua").hide();  
        });
    });
</script>

这是我的控制器：

public function index()
{   
    $Warungs_all = Warung::paginate(10);
    $kategoriwarung_all = kategoriwarung::all();


    return view('index' , compact('kategoriwarung_all' , 'Warungs_all' ));
}


public function get_warung_by_category($category){

    $category_fix = $category;
    $kategoriwarung_all = kategoriwarung::all();

    foreach($kategoriwarung_all as $kategoriwarung){
        $kategoriwarung->nama;
        $kategoriwarung->id;
        $warung_has_kategoriwarungs[$kategoriwarung->nama] = warung_has_kategoriwarung::where('kategoriwarung_id' , '=' , $kategoriwarung->id)->with(['Warung','kategoriwarung'])->paginate(10);
    }

    return view('daftar_warung' , compact('warung_has_kategoriwarungs' ,'category_fix'));
}

public function warung_plain($category , IndexController $objek){
    $objek->get_warung_by_category($category);
}

最后这是我的路线：

Route::get('/', 'IndexController@index');
Route::post('/ambil_kategori/{category}',    'IndexController@get_warung_by_category');
Route::get('/warung_plain/{category}', 'IndexController@warung_plain');

Answer 1

因为您正在发帖，所以我认为您需要一个令牌。

您可以在此处阅读有关 csrf-x-csrf-token 的文档。

总结您需要：

// insert a meta tag to generate a tocken
<meta name="csrf-token" content="{{ csrf_token() }}">

// use the tocken in the header http request
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

在您的代码中是：

jQuery.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': {{ csrf_token() }}
    }
}).ajax({
    type: "POST",
    //after passing data category then system will append 
    //html code to id="warung-plain"
    url: "/ambil_kategori/{category}",
    data: {category: category},
    success: function(res) {
        $('#warung-plain').load("/warung_plain/{category}");
    }
});

请注意，blade 的语法 {category} 是错误的，如果你有一个变量，它应该像 {{ $category }}，如果它只是一个字符串，它应该像 category。

Answer 2

这里有很多错误。您正在使用 post，但实际上并没有创建新的资源项。其次，您的 warung_plain 函数不返回任何内容？你应该对这条路线做一个get

/ambil_kategori/{category}

此外，在您的 JS 中，您没有针对正确的 url 进行发布。您应该发布到（如果出于某种原因您想这样做）：

'/ambil_kategori/'+category

建议你重新阅读 L5 文档