Laravel AJAX (with jQuery)
ΠΠ°ΡΡΡΠΎΠΈΡΡ vite ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ jQuery ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π·Π΄Π΅ΡΡ...
Vite ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ jQueryΠ Ρ ΡΠ΄Π΅ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ js ΠΈ csrf ΡΠΎΠΊΠ΅Π½
@vite(['resources/css/app.css', 'resources/js/app.js'])
<meta name="_token" content="{{csrf_token()}}" />
ΠΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΠΎΡΠΌΡ ΠΈ ΡΠΊΡΠΈΠΏΡ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π·Π°ΠΏΡΠΎΡΠ°
<form id="contactForm">
<input id="word" type="text"/>
<button type="submit">ΠΡΠΏΡΠ°Π²ΠΈΡΡ</button>
</form>
<script type="module">
// Π·Π°ΠΏΡΡΡΠΈΡΡ ΠΏΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΡΠΎΠ³ΡΡΠ·ΠΈΡΡΡΡ
$(document).ready(function () {
$("#contactForm").submit(function (event) {
// ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈΠ½ΠΏΡΡΠΎΠ²
var formData = {
word: $("#word").val(),
};
// ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠΎΠΊΠ΅Π½ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Π·Π°ΠΏΡΠΎΡΠ°
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
// ΠΎΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌ ajax Π·Π°ΠΏΡΠΎΡ Π½Π° Π½Π°Ρ ΡΠΎΡΡ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ 'check-word'
$.ajax({
type: "POST",
url: "{{route('check-word')}}",
data: formData,
dataType: "json",
encode: true,
success: function (data){ // Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡΡ Π΅ΡΠ»ΠΈ ΠΎΡΠ²Π΅Ρ Π²Π΅ΡΠ½ΡΡ success:true
$('#right-card').html(data.html); // Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Π² Π±Π»ΠΎΠΊ Ρ Π°ΠΉΠ΄ΠΈ #right-card, ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ data.html
},
});
// ΠΎΡΠΌΠ΅Π½ΡΠ΅ΠΌ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Π½Π°ΠΆΠ°ΡΠΈΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΡΠΎΡΠΌΡ
event.preventDefault();
});
});
</script>
ΠΠ΅ΡΠΎΠ΄ ΠΊΠΎΠ½ΡΡΠΎΠ»Π»Π΅ΡΠ° ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ ΡΠΎΡΡΠ° check-word
public function check(Request $request){
$word = $request->word;
// ΡΠ½Π°ΡΠ°Π»Π° ΡΠ΅Π½Π΄Π΅ΡΠΈΠΌ Π²ΡΡ ΠΈ Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Π΅Π³ΠΎ Π² $html
$html = view('table')->with(['word' => $word])->render();
// Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌ json Ρ ΠΎΡΠ²Π΅ΡΠΎΠΌ success ΠΈ ΠΎΡΡΠ΅Π½Π΄Π΅ΡΠ΅Π½Π½ΡΠΌ Π²ΡΡ
return response()->json([
'success' => true,
'html' => $html
]);
}
Last updated