[英]post ajax data with click a link on laravel 5
我是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');
因為您正在發布帖子,所以我認為您需要令牌。
在這里,您可以閱讀有關該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 }}
。
這里有很多錯誤。 您正在使用發布,但實際上並沒有創建新的資源項目。 其次,您的warung_plain函數什么都不返回? 你應該對這條路不對勁
/ambil_kategori/{category}
此外,在您的JS中,您不會針對正確的網址發布內容。 您應該發布到(如果出於某種原因要這樣做):
'/ambil_kategori/'+category
建議您重新閱讀L5文檔
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.