AJAX با PHP
Ajax یکی از تکنولوژی‌هایی است که به واسطه آن صفحات وب قابلیت بروزرسانی بدون نیاز به بارگذاری دوباره را دارا می‌باشند.
برای استفاده از Ajax در PHP، می‌توانید از کتابخانه jQuery استفاده کنید.
در ادامه یک مثال ساده از نحوه استفاده از Ajax در PHP با jQuery آمده است:
- در فایل HTML خود، ابتدا کتابخانه jQuery را به صورت زیر اضافه کنید:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- سپس یک فرم ساده با یک ورودی ایجاد کنید:
<form> <input type="text" id="name" placeholder=" نام خود را وارد کنید "> <button id="btn-ajax">ثبت</button> </form>
- نمای کلی فایل html همراه با JavaScript به این صورت است:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Ajax in PHP with ebrahiminejad.com</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#btn-ajax').click(function(){
$.ajax({
url: 'process.php',
type: 'POST',
data: {name: $('#name').val()},
success: function(response){
$('#result').html(response);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="name" placeholder=" نام خود را وارد کنید ">
<button id="btn-ajax">ثبت</button>
<div id="result"></div>
</body>
</html>
بخش جاوا اسکریپت همراه با توضیح
// فراخوانی تابع در محیط جی‌کوئری بعد از لود کامل صفحه
$(document).ready(function(){
// رویداد کلیک برای دکمه با ایدی "btn-ajax"
$('#btn-ajax').click(function(){
// ارسال درخواست آجاکس با استفاده از تابع $.ajax
$.ajax({
// آدرس فایل پی اچ پی که در آن درخواست اجاکس پردازش می‌شود
url: 'process.php',
// نوع درخواست: POST
type: 'POST',
// داده‌هایی که درخواست آجاکس با آن‌ها ارسال می‌شود
data: {name: $('#name').val()},
// تابع موفقیت‌آمیز بودن ارسال درخواست آجاکس
success: function(response){
// نمایش پاسخ بازگشتی از فایل پی اچ پی در داخل دیو با ایدی "result"
$('#result').html(response);
}
});
});
});
4. در فایل php به این صورت عمل کنید:
<?php
if(isset($_POST['name'])){
$name = $_POST['name'];
echo "Hello, $name!";
}
?>
در این مثال، با فشردن دکمه ثبت, اطلاعات وارد شده در فیلد متنی به سمت سرور ارسال می‌شود
و نتیجه در div با id برابر با result نمایش داده می‌شود.
در فایل HTML، ابتدا کتابخانه jQuery لود شده است.
در ادامه، یک رویداد click, برای دکمه با id برابر “btn-ajax” تعریف شده است.
در داخل این رویداد، یک درخواست Ajax با استفاده از تابع $.ajax ارسال شده است.
در آن، اطلاعات وارد شده در فیلد متنی با id برابر “name” به صورت post به فایل PHP با نام “process.php” ارسال شده است.
در صورت موفقیت‌آمیز بودن ارسال درخواست، پاسخ بازگشتی از فایل PHP در داخل div با id برابر “result” نمایش داده می‌شود.
حالا میخوایم بیش از یک متغییر بگیریم
در فایل HTML
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Ajax in PHP with ebrahiminejad.com</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#btn-ajax').click(function(){
var name = $('#name').val();
var age = $('#age').val();
$.ajax({
url: 'process.php',
type: 'POST',
data: {name: name, age: age},
success: function(response){
$('#result').html(response);
}
});
});
});
</script>
</head>
<body>
<label for="name">نام:</label>
<input type="text" id="name" name="name"><br><br>
<label for="age">سن:</label>
<input type="number" id="age" name="age"><br><br>
<button type="button" id="btn-ajax">ارسال</button>
<div id="result"></div>
</body>
</html>
در فایل php
<?php
if(isset($_POST['name'])){
$name = $_POST['name'];
$age = $_POST['age'];
echo "Hello, $name! age is: $age";
}
?>
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.