تعامل Html ، PHP و Javascript : با Ajax حرفه اي شويد !

دسته بندی: جاوا اسکریپت
زمان مطالعه: ۲ دقیقه
۰۸ مرداد ۱۳۹۳

در این جلسه به شما آموزش خواهیم داد که چگونه از کدهای HTML ، CSS ، جاوا اسکریپت و Ajax به صورت تعاملی با PHP استفاده کنیم و از هر کدام مثال های جالبی خواهیم زد .

:: مواردی که در این جلسه مطرح می کنیم به شکل زیر هست :

فصل 7 : تعامل Html ، PHP و Javascript : با Ajax حرفه اي شويد !

در این فصل مفاهیم در قالب ساخت رابط کاربری یک وبلاگ تدریس می شوند .

  • لود و استفاده از فايل هاي PHP در همديگر
  • تشريح توابع include و include_once
  • تشريح توابع require و require_once
  • مروري بر زبان نماد گذاري HTML
  • استفاده از تگ هاي HTML براي نمايش بهتر خروجي کدهاي PHP
  • استفاده از تگ هاي فرمت بندي متن در خروجي هاي PHP
  • ايجاد خروجي هاي پويا و متغير
  • استفاده از حلقه هاي PHP و تگ table براي نمايش خروجي به صورت جدولي
  • نمايش شرطي ويژگي ها و تگ هاي HTML و کلاس هاي CSS
  • مروري بر زبان جاوااسکريپت
  • تشريح کاربردهاي زبان جاوااسکريپت
  • نحوه ي استفاده از کدهاي جاوا اسکريپت در صفحات PHP
  • نحوه ي انتقال و استفاده از داده ها و مقادير php در کدهاي جاوااسکريپت
  • جي کوئري (jQuery) و سهولت در نوشتن کدهاي جاوااسکريپت !
  • بررسي اعتبار داده هاي ورودي کاربر توسط جاوااسکريپت (جي کوئري)
  • نمايش پيام هشدار پيش از انجام عمليات حساس، با استفاده از جاوااسکريپت
  • تکنولوژي Ajax چيست؟
  • مزايا و معايب استفاده از Ajax
  • موارد استفاده ي صحيح و اشتباه از تکنولوژي Ajax
  • آموزش به کارگيري Ajax به همراه PHP با استفاده از کتابخانه ي جي کوئري
  • نمايش تصوير و يا متن لودينگ در هنگام ارسال درخواست Ajax
  • ميني پروژه : جستجو در ليست اسامي و پيشنهاد نتايج در هنگام تايپ با استفاده از Ajax
  • تمرين

نکته :

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

:: توجه

این مطلب یک جلسه از آموزش PHP می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش PHP

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

احد رحیمی

سلام.
در این فصل وقتی من کد POST_$ یا GET_$ را وارد میکنم با پیغام زیر روبرو میشم

Fatal error: Uncaught Error: Function name must be a string in C:\xampp\htdocs\blog 5\searchphone.php:2 Stack trace: #0 {main} thrown in C:\xampp\htdocs\blog 5\searchphone.php on line 2

لقمان آوند

این خطا میگه نام تابعتون باید یک رشته باشه. کدتون رو در خط ذکر شده بررسی کنید.

وحید

در حالی که تو قسمت functions این توابع تعریف شده.

وحید

سلام استاد . ببخشید توی قسمت های sidebar و content توابعی رو که با دستور زیر فراخوندین رو نمیشناسه و میگه همچین تابعی نیست.مشکل چیه؟

        <?php echo getSidebarTitle(); ?>
لقمان آوند

چک بکنید که حتما فایل اینکلود شده باشه و مسیرش درست باشه

علی خسروی

سلام استاد عزیز خسته نباشید

در استفاده از ajax وقتی ما داده ها رو در سمت سرور چاپ می کنیم اون وقت می تونیم داده ها رو از طریق پارامتر response تابع success در جاوا اسکریپت (کلاینت) دریافت کنیم ولی من تو مینی پروژه ای ام نیاز داشتم درستی یا نادرستی یه مقدار رو هم به سمت کلاینت ارسال کنم ولی نمی دونم چطور میشه این مقادیر رو ارسال کرد (البته میشه یه آرایه رو در سمت سرور چاپ کرد که یکی از مقادیرش مثلا FALSE باشه و … ) ولی تو وردپرس مثل کد پایین میشه مقادیر رو راحت تر منتقل کرد (به صورت تفکیک شده)

البته خیلی جاها خوندم که ajax بر اساس json اطلاعات رو تبادل میکنه الان کلا گیج شدم این که ما مقادیر رو در سمت سرور چاپ می کنیم و سمت کلاینت با response دریافت می کنیم در حقیقت داریم از json استفاده می کنیم ؟‌

wp_die(json_encode($result));
امین قرائت

سلام استاد وقت بخیر
در مورد تمرینه سوال داشتم
من تمام کدهارو توی phpstorm وارد کردم اما تویlocalhost
هیچ چیزی بالا نمیاره
میخواسم بدونم مشکل کجاست
با تشکر

<div style="background-color: rgb(<?php echo rand(0,255);?> ,<?php echo rand(0,255);?>,<?php echo rand(0,255);?>;)hight=100px">

</div>

<?php

echo ‘<style="width:100%;"height:100%;">’ . PHP_EOL;
for ($i = 0; $i <= 20; $i++) {
    echo "<tr>" . PHP_EOL;

    for ($j = 0; $j <= 20; $j++) {
        echo "<td style=background-color:rgb(" . rand(0, 255) . ",".rand(0, 255) . ",".rand(0, 255) . ")’> </td>";
}
        echo "</tr>". PHP_EOL;
   }
        echo "</table>" . PHP_EOL;
نازمحمد گری

با سلام خسته نباشید /
من در این کد مشکل دارم e.preventDefault(); وقتی که از این کد استفاده می کنم باز فرم من به فایل پی اچ پی انتقال داده میشه / اگه امکان هست راهنمایی کنید.

$("#serchBtn").click(function(e){
    e.preventDefault();
    $.ajax({
        type: ‘GET’,
        url:"searchPhone.php",
        data:$("#searchForm").serialize(),
        success: function (response){
            $(‘.results’).html(response);
        }
    });
});
لقمان آوند

چک کنید که سلکتور درستو انتخاب کرده باشید. این مورد رو هم روی form.submit اعمال کنید.

mohammad babaei

ممنون که به دیدگاهم توجه کردید.!

Farid S

searchVal رو در کد زیر undefined میدونه

&lt;?php
$searchKey = $_POST[&#039;searchVal&#039;];
$names = array(
 &quot;Loghman - 09999999999&quot;,
 &quot;Ali - 066645554&quot;,
 &quot;Ahmad - 0666666666&quot;,
 &quot;Mohammad - 05555555555&quot;,
 &quot;Jafar - 0333333333&quot;,
 &quot;Sara - 011111111111&quot;,
 &quot;Zeinab - 012121212&quot;,
 &quot;Komeil - 0144556677&quot;,
 &quot;Seheil - 09876543555&quot;,
 &quot;Hassan - 0144556677&quot;,
 &quot;Hossein - 034567688&quot;,
);
foreach($names as $c) {
 if(strpos($c, $searchKey) !== false){
  echo $c . &#039;';
 }
}
?&gt;

این درحالی هست که وقتی از ajax برای درخواست استفاده میکنم. و درصورتی که استفاده نکنم ارور نمیگیرم.

لقمان آوند

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

Farid S

http://up.persianscript.ir/uploads2/1253-s6.zip

خیلی ممنون، واقعا آدم با پشتیبانی دلش گرم میشه. انشالله به همین قوت ادامه داشته باشه.

لقمان آوند

سلام
مشکل از عدم کارکرد ایجکس بوده.
اول اینکه فایل جی کوئری رو لود کردید مشکل داره. من همونی که تو دوره استفاده کردیم رو به جاش لود کردم. (jquery.min.js)
دوم اینکه کدهای ایجکس درون blog.js هم کامنت بودن و کار نمی کردن. یکم تغیرش دادم. اگه بتونید دوره جاوااسکریپت و جی کوئری رو هم ببینید بدردتون می وره اینجور مواقع.
از اینجا دانلود کنید.

سحر بشری

سلام استاد وقتتون بخیر. در این سرچ تلفن ها شما یه دایو ایجاد کردید که نتایج سرچ رو اونجا نشون بده. اما اگه مثل گوگل بخوایم نتایج درون همون input نشون داده بشه چجوری میشه؟؟؟ من بجای کلاس دایوی که برای نتایج در فایل جاوا اسکریپت گذاشتید کلاس input رو گذاشتم که نتایج اونجا نمایش داده بشه اما اجرا نشد.

لقمان آوند

اینکار نیاز به بحثای پیشرفته تری داره. باید از ایجکس هم استفاده کنید و بتونید به خوبی با جاوااسکریپت کار کنید.
البته پلاگین های js خوبی در این زمینه هست که به نام autocompelete معروفن. اینجا می تونید چند نمونشو ببینید.

darin

سلام آقای آوند
ممنونم از آموزش خوبتون
آقای آوند من یک مشکل برام پیش امده ممنون میشم راهنماییم کنید:
آقای آوند شما در مثال سرچ شماره تلفن امدید که با ajax داده ها را سریالایز کردید و به صفحه مورد نظر فرستادید برای پردازش. خب قبول و در صفحه مورد نظر با استفاده از دستور get آن input را که حاوی اطلاعات بود گرفتید. حالا اگه یک فرم با input های زیادی باشد باید تک تک با دستور get یا post محتوای این input ها را بگیریم و نمیشه این get یا post ها داخل یک تابع یا if باشند؟
نمیشه با استفاده از دستور if($post) کل فرم را بگیریم و بعد داخل (post)if کارهای گرفتن داده ها را انجام دهیم؟
مثل ورد پرس که با استفاده از خاصیت action داخل data: مشخص میکند که چه فرمی ارسال شده است.
میخواهم داده ها داخل یک if یا تابع پردازش شوند.

لقمان آوند

مشکلی نداره. شما می تونید چک کنید اگر $__POST ست شده باشه داخل if داده ها رو ازش بگیرید. باید چک کنید یکی یکی که کدوم داده ست شده.
برای این کار شاید بتونید یه تابع بنویسید که ورودی های post رو بگیره و در یه آرایه دیگه بهتون برگردونه!

لقمان آوند

سلام
بله جناب علیمحمدی مسائل مربوط به طبان php رو احتمالا گفتند.
برای ایجکس چند مورد مثال زیده شده و برای تدریس کاملش باید دوره js رو ببینید.
mySQL خوب تدریس شده

ارغوان باغی

سلام و وقت بخیر .

چرا اطلاعات غلط به کاربر میدید . ajax آموزش داده نمیشه توی این دوره . حتی آقای آوند هم این مورد رو ذکر میکنن توی همین قسمت از آموزش .فقط یه مثال زده میشه برای اینکه کاربر یه نمونه از ajax دیده باشه

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

شما هم چنان می توانید سوالات خود را در این قسمت بپرسید اما اولویت پاسخ گویی با دانشجویانی است که بازه پشتیبانی فعال دارند.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل