فراخوانی فایل php از طریق jquery و ajax


ناصر نادری 1394/11/18

بنام خدا.

بعد از یک غیبت طولانی در خدمت دوستان هستیم با یک سری آموزشی دیگه، که تصمیم گرفتیم مباحث پیشرفته نام گذاری کنیم، در خدمت دوستان خواهیم بود.

بحث ajax حالا دیگه یک بحث تقریبا قدیمی در عرصه وب به حساب میاد. و شما تقریبا هیچ برنامه تحت وبی نمیبینید که به نحوی از ajax توش استفاده نشده باشه. یکی از مسائلی که بیشتر برنامه نویسای وب با اون روبرو هستن ارتباط بخش کلاینت برنامه وب با بخش سمت سرور اون هست. استفاده از کتابخانه jquery بخش اعظمی از برنامه نویسی سمت مرورگر یا کلاینت رو به خودش اختصاص داده. برای برنامه نویسی سمت سرور هم بیشتر سایتهای دنیا از زبان php استفاده میکنند.

دغدغه اصلی، ارتباط برنامه ها و توابع این دو نوع زبان باهم  بدون لود شدن یا به اصطلاح submit شدن کل فرم وب هست. این کار با تکنولوژی ajax خیلی عالی امکان پذیر هست.  خوشبختانه jquery امکانات واضح و ساده ای رو برای اینکار برروی زبان جاوااسکریپت ارائه داده.

jquery یک آبجکت رو برای اتصال به برنامه سرور از این طریق برای ما آماده کرده که ساختارش رو پایین میبینیم.

 $.ajax({
url: "ادرس فایل برنامه سمت سرور"
, type: 'POST'//متد ارسال اطلاعات
, contentType: 'application/json' 
, dataType: 'json' //فرمت اطلاعات دریافتی بعد از پردازش
, data: postData //شی مربوط به پارامتر های ارسالی به برنامه سرور
, success: function(data){ 
//متد ی که بعد از موفقیت در ارسال پردازش و دریافت نتایج اجرا میشه
} 

}); 

در واقع شما یک فایل مثلا php  رو که عمل خاصی  انجام میده هدف قرار میدید، بعد با استفاده از متدی مثل POST اون رو با پارامترهایی که توبخش data تعیین میکنید فراخوانی میکنید. فایل php پارامتر های شما رو میگره عمل مورد نظر رو انجام میده و نتیجه رو توی فرمتی که با dataType تعریف کردیم برای شما برمیگردونه. این فرمت میتونه text,xml, json ویا html باشه. شما داخل تابعی که در پارامتر success مشخص میشه اطلاعات رو که توی متغییر data هست میگیرید و عمل مورد نیاز رو انجام میدید.

برای روشن شدن کلی مسئله یک مثال کامل رو همراه توضیح در ادامه خواهیم داشت.

قبل از هرچیز باید روی سیستمتون برنامه های مورد نیاز برای برنامه نویسی وب با php که میتونید اونو اینجا پیدا کنید داشته باشید. البته میدونم که دارید.!!

یک پوشه به نام AjaxTest توی شاخه اصلی هاستتون که ایجاد کنید.برای من مسیر مورد نظر به این شکل هست :

c:\wamp\www\AjaxTest\

حالا ما توی این پوشه سه تا فایل خواهیم داشت. یک فایل jquery.js هست که کتابخانه مورد نیاز ما برای کار با jquery هست و دوفایل دیگه یکی index.html هست که کد html و jquery رو توش مینویسیم و دیگری فایل ajaxaction.php هست که برنامه و یا پردازش سمت سرور مارو قرار هست اجرا کنه .

 

موضوع برنامه ما این هست که میخواییم بعد از  پر شدن یک فرم  و کلیک بر روی دکمه بدون لود شدن کامل صفحه ، و از طریق یک فرایند ajax، اطلاعات فرم پردازش بشه و پیامهایی رو بعد از پردازش دریافت کنیم.

در داخل فایل index.php کدهای زیر را بنویسید:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0  Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>appinapps advanced topic</title>


<style>

body{
direction:rtl;
background:#eee;
font-family:Tahoma;
}

.form-box{

width:30%;
margin:0px auto;
margin-top:10%;
background:#fff;
padding:10px;
text-align:right;
font-size:12px;

}
.result-box{

width:100%;
margin-top:10%;
color:red;
text-align:right;
font-size:13px;
font-family:Arial;

}


</style>


<!--فراخوانی کتابخانه jquery----->
<script src="jquery.js" type="text/javascript"></script>

</head>
<body>


<div class="form-box">

نام : <br />

<input type="text" id="txtName" /><br />

نام خانوادگی : <br />

<input type="text" id="txtLastName" /><br />

شماره ملی : <br />

<input type="text" id="txtNCode" /><br />

شماره پرسنلی : <br />

<input type="text" id="txtPCode" /><br />

<hr />

<!--رویداد در قالب یک تابع جاوا اسکریپت بعد از زدن دکمه فراخوانی میشود-->
<input type="button" id="btnValidate" onclick="formValidate()" value="بررسی فرم"  />

<br />

<!--جهت نمایش نتیجه کار-->
<div class="result-box">

</div>

</div>


<script language="javascript">

//تابعی که در هنگام کلیک بر روی دکمه فراخوانی میشود
function formValidate(){

//ذخیره محتوی ورودی های فرم در متغییر برای مرتب شدن برنامه
var name=$('#txtName').val();
var lastName=$('#txtLastName').val();
var nCode=$('#txtNCode').val();
var pCode=$('#txtPCode').val();



//تعریف و اجرای شی ajax برای فراخوانی فایل php
$.ajax({

url:'ajaxaction.php',//فایل سرور
dataType:'json',
type:'POST',
data:{"action":"formvalidate","name":name,"lastname":lastName,"ncode":nCode,"pcode":pCode},
success:function(data){
if(data["error"]!="")
{
//درصورت داشتن مشکل در فرم
$('.result-box').css("color","red");
$('.result-box').html(data["error"]);
}else
{
//درصورت نداشتن مشکل
$('.result-box').css("color","green");
$('.result-box').html(data["result"]);
} 

}


});

}


</script>




</body>

</html>

در داخل فایل ajaxaction.php کدهای زیر را بنویسید :

 <?php
//تغییر سرایند فایل به صوزت json
header('Content-type: application/json');

//بررسی صحت فراخوانی فایل با action مورد نظر
if(isset($_POST["action"])){

// ذخیره مقادیر دریافت شده از متد POST در متغییر ها
$name=$_POST["name"];
$lastName=$_POST["lastname"];
$nCode=$_POST["ncode"];
$pCode=$_POST["pcode"];

// ایجاد یک ارایه اولیه
$formResult=array();
$error="";
$result="";

// بررسی مقادیر فرم 
if($name=="")
{

$error.="<br> فیلد نام خالی است";
}
if($lastName=="")
{
$error.="<br> فیلد نام خانوادگی خالی است";
}

if($nCode=="") 
{
$error.="<br> فیلد کد ملی خالی است";
}else{
if(strlen($nCode)!=10)
$error.="<br> کد ملی نامعتبر است";

}

if($pCode=="") 
{
$error.="<br> فیلد شماره پرسنلی خالی است";
}else
{
if(strlen($pCode)>8)
$error.="<br> شماره پرسنلی نامعتبر است";

}
//////////////////////////////////////////////////////////////////
if($error=="")
{
$result="بررسی فرم اجرا شد. <br> بدون اشکال";
}



// جای دادن دو متغییر نتیجه و خطا در آرایه ای که میخواهیم بصورت جیسون برگردانده  شود
$formResult["error"]=$error;
$formResult["result"]=$result;

// تبدیل آرایه به فرمت جیسون و چاپ آم در خروجی
echo json_encode($formResult);

}

?> 

برنامه را از آدرس زیر /

http://localhost/AjaxTest
اجرا کنید

سورس برنامه رو میتونید از فایل ضمیمه دریافت کنید

در پناه حق....

فایلهای ضمیمه
توجه! برای مشاهده فایلهای ضمیمه با ید وارد سایت شوید
درباره نویسنده
admin
ناصر نادری
prgnaderi@hotmail.com
فوق لیسانس مهندسی نرافزار- برنامه نویس و مدرس دانشگاه
نظرات شما
نظر جدید
    User name
    farhadhp

    لینک دانلود خرابه کار نمیکنه

    1395/04/29 2:12 PM
    User name
    admin

    سلام . حل شد. میتونید دانلود کنید...

    1395/05/03 9:53 AM