امروز پنجشنبه ۱۴۰۰/۰۱/۲۶

2021/04/15 GMT +4:30

» استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP

php

همان طور که می دانیم، جاوا اسکریپت (JavaScript) به عنوان یک زبان اسکریپت نویسی سمت کاربر و قابل اجرا در مرورگر، به خودی خود فواید و کاربردهای زیادی در صفحات وب دارد و تقریبا تمام برنامه نویسان و توسعه دهنده گان از آن استفاده می کنند، از این گذشته مواردی پیش می آید که بخواهیم از قدرت و قابلیت های آن برای نمایش محتوای داینامیک و به طور خاص در تعامل و ترکیب با PHP استفاده کنیم، این شیوه یکی از معمول ترین روش هایی است که بیشتر سایت های خدمات دهنده در زمینه ابزارهای وبلاگ نویسی برای کوتاه کردن کدهای نهایی و خیلی فواید دیگر از آن استفاده می کنند، از این رو و به جهت اینکه پرسش های زیادی از طرف کاربران در این خصوص مطرح می شود، قصد داریم این آموزش را به نحوه استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP اختصاص دهیم.

هدف از ترکیب JavaScript و PHP


پیش از اینکه به ادامه آموزش بپردازیم، بد نیست در یک جمع بندی کلی با هدف این تکنیک آشنا شویم.
شرایطی که باعث می شود از جاوا اسکریپت و PHP به صورت ترکیبی استفاده کنیم اغلب به مواردی مربوط می شوند که بخواهیم به طور مثال محتوای داینامیک خروجی داده شده توسط کدهای PHP را به صورت فریم در صفحات HTML نمایش دهیم، به طور مثال فرض کنید فایل PHP با آدرس زیر یک آیکن پیج رنگ نمایش می دهد.
http://www.yoursite.com/page_rank.php?url=$url&img=5
واضح است که اگر آدرس فرضی بالا در یک مرورگر وارد شود، آیکن پیج رنک به نمایش در می آید، اما مسلما امکان درج مستقیم فایل PHP در صفحات HTML وجود ندارد و از طرفی تمام و شاید اغلب کاربران این امکان را ندارند که از دستورات سمت سرور استفاده کنند و محتوای فایل را نمایش دهند (که اگر هم در شرایطی این طور باشد، با مشکلات و دردسرهای بعدی روبرو خواهند شد)، به همین خاطر باید به دنبال یک واسطه بین فایل های داینامیک و صفحات HTML استاتیک باشیم، این واسطه نیز چیزی نیست جزء دستورات جاوا اسکریپت که به راحتی می توان به کمک آنها و تنها با چند خط کدنویسی ساده به هدف مورد نظر رسید و کد نهایی را به شکل نمونه زیر تغییر داد.
<script type="text/javascript" src="http://yoursite.com/page_rank.php?url=$url&img=5"></script>
اکنون می توان کد اسکریپتی بالا را در صفحات HTML به راحتی استفاده کرد، این روش جایگزین مناسبی است برای تکنیک های مشابه (مانند استفاده از iframe و...)، اما مراحل انجام این کار.

فراخوانی فایل PHP در JavaScript


اولین گام این است که آدرس فایل PHP خود را در قسمت src تگ های جاوا اسکریپت آدرس دهی کنیم، البته اگر تعداد فایل های سمت سرور بیش از یک مورد باشد، فایلی باید در این قسمت تنظیم شود که خروجی را تولید می کند و نیازی به وارد کردن سایر فایل ها درون دستورات جاوا اسکریپت نیست، به مثال زیر توجه کنید.
<script type="text/javascript" src="http://yoursite.com/output.php"></script>
نکته 1: اگر فایل سمت سرور (فایل PHP) نیاز به دریافت پارامترهایی داشته باشد، مانند متد GET در حالت عادی، می توانیم پارامترها را با افزودن علامت ? به انتهای آدرس و استفاده از علامت های & و =، به هر تعداد که لازم است تنظیم کنیم.
نکته 2: استفاده از این روش محدود به لینک های داینامیک نیست، درواقع با هر لینکی که فایل سرور به درستی توسط آن فراخوانی شود، خروجی دریافت شده و به نمایش در می آید.

تنظیمات JavaScript در فایل PHP


در گام دوم و در فایل PHP، باید خروجی کدها را مطابق با syntax دستور document.write تنظیم کنیم، همان طور که می دانیم یک دستور ساده document.write در جاوا اسکریپت به صورت زیر است:
<script type="text/javascript">
document.write('چاپ خروجی مورد نظر در مرورگر');
</script>
لذا وقتی این دستور را در کدهای PHP استفاده می کنیم باید به نکات زیر توجه داشته باشیم.
- درج موارد مربوط به document.write درون تگ های PHP مجاز نیست و باید خارج از علامت های php?> و ?> باشد.
نمونه اشتباه:
<?php
document.write('echo "ترکیب جاوا اسکریپت و PHP";');
?>
نمونه صحیح:
document.write('<?php
echo "ترکیب جاوا اسکریپت و PHP";
?>'
);
- به جهت رعایت syntax صحیح و مطابق با دستور العمل جاوا اسکریپت، علامت های ' و " در خروجی را با یک بک اسلش (\) ایمن سازی می کنیم، دقت کنید که در برخی سرور ها به جهت روشن بودن قابلیت magic_quotes_gpc (این قابلیت علامت های ' و " را با افزودن یک بک اسلش ایمن سازی می کند)، این کار به صورت خودکار انجام می شود و لذا ابتدا باید این قابلیت را غیر فعال کنید یا بک اسلش های اضافه شده را حذف نمائید تا از درج دو بک اسلش (یک بک اسلش توسط magic_quotes_gpc و یک بک اسلش دیگر توسط توابعی مانند addslashes) اجتناب شود، نمونه راه حل زیر می تواند هر دو مشکل را بر طرف کند.
document.write('<?php
//تابعی برای حذف بک اسلش های اضافه
function GpcClean($str){
    if(get_magic_quotes_gpc()){
        return stripslashes($str);    
    }
    return $str;
}
//افزودن بک اسلش به خروجی
echo addslashes(GpcClean("ترکیب جاوا اسکریپت و PHP"));
?>'
);
ملاحظه می کنید که برای بررسی روشن بودن قابلیت magic_quotes_gpc از تابع get_magic_quotes_gpc استفاده کرده ایم، اگر این قابلیت روشن باشد (مقادیر برگردانده شده توسط تابع get_magic_quotes_gpc برابر با TRUE بود)، مقادیر خروجی از فیلتر تابع stripslashes عبور کرده و بک اسلش های زائد حذف می شوند، در نهایت نیز با تابع addslashes، هر جا علامت ' یا " در خروجی وجود داشته باشد به صورت '\ و "\ تبدیل می شوند تا مطابق با syntax دستورات جاوا اسکریپت باشند.
نکته: استفاده از خط جدید (line break) در خروجی، مجاز نیست و موجب از کار افتادن نمایش کد می شود، به عبارت دیگر نباید از حالت Enter در خروجی کدهای PHP در ترکیب با جاوا اسکریپت استفاده شود.
دسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» ایجاد پنل جمع شونده با جاوا اسکریپت و فریم ورک Spry
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
» نمایش کادر پیام شناور در سایت و وبلاگ با جاوا اسکریپت
» ساخت پنل چند سربرگی (Tabbed Panel) با جاوا اسکریپت و CSS
» کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
commentنظرات (۸۰ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: مجتبی
۱۳:۰۴ ۱۳۹۹/۰۴/۰۴
سلام میشه یک کد جاوا رو به php تبدیل کرد تا لود سایت سریع تر بشه؟
پاسخ: 
PHP در سرور اجرا و JavaScript در مرورگر پردازش می شود، به همین خاطر راهی برای تبدیل جاوا اسکریپت نیست، اما با استفاده از ابزارهای فشرده سازی دستورات JS می توانیم حجم فایل ها و کدها را کاهش دهیم، برای مثال:
https://javascript-minifier.com

https://jscompress.com
نویسنده: عاطفه مرادی
۱۱:۴۵ ۱۳۹۹/۰۵/۱۹
سلام. من تازه یادگیری html رو شروع کردم و برای وبسایتمون برروی کنترل پنل html می نویسم. از طراح وبسایت خواستم که دسترسی جاوا را برایم باز کنند و ایشون یک فایل js در ftp برایم فرستادند. فایل js را در notepad باز کردم. ولی مطمئن نیستم اگر در notepad جاوا را بنویسم و id بدهم، می توانم از آن در html استفاده کنم یا باید این فایلها بصورت آنلاین باز شود. کلا در این مورد راهنمایی می خواستم. ممنون
پاسخ: 
صفحات HTML هم به صورت آنلاین (روال متداول بازدید از سایت ها، بارگذاری اطلاعات از سرور) و هم به صورت آفلاین (اجرای فایل از روی دستکتاپ با برنامه های مرورگر، بارگذاری اطلاعات از سیستم عامل یا آنلاین) قابل مشاهده هستند، داخل این صفحات می توانیم فایل ها یا دستورات مستقیم جاوا اسکریپتی داشته باشیم که این دستورات همزمان با نمایش صفحه وب در مرورگر کاربران اجرا می شوند، اگر کدها به صورت فایل خارجی در صفحه قرار بگیرند باید آدرس مشخصی داشته باشند، این آدرس بسته به محل نگهداری فایل های JS می تواند آفلاین (بر روی سیستم عامل) و یا آنلاین (بر روی سرور سایت) باشد، برای ویرایش کدهای این نوع فایل ها نیز هم می توانیم محتویات فایل را مستقیما ویرایش کنیم و هم نسخه جدید کدنویسی و جایگزین نسخه موجود کنیم (البته با گرفتن پشتیبان از فایل موجود)، لطفا برای کسب اطلاعات بیشتر از ساختار وب به لینک زیر مراجعه کنید:
webgoo.ir/help
نکته: در صورتی که بخواهیم نتیجه تغییرات در سایت آنلاین اعمال شود قاعدتا فایل های موجود در سرور باید ویرایش شوند و صرفا ویرایش آفلاین آنها بدون جایگزینی با نسخه آنلاین کفایت نمی کند.
نویسنده: شهریار صادقی
۱۳:۱۸ ۱۳۹۹/۰۹/۰۱
من سه تا صفحه در php storm درست کردم یکی برای html یکی برای جاوا اسکریپت و جی کوِئری و یکی هم برای css اول کتابخانه جی کوئری رو فراخوانی کردم و بعد فایل js خودم رو و بعد هم فایل css رو حالا css کار میکنه ولی js کار نمیکنه دلیلش چیه ؟ من حتی تابعی که تو صفحه جاوا نوشته بودم رو با رویداد onclick تو html امتحان کردم اینطوری کار میکرد ولی وقتی همه دستورات رو تو صفحه جی اس میارم دیگه کار نمیکنه.
پاسخ: 
لطفا با زدین دکمه F12 در مرورگر خطا یا خطاهای دریافتی در قسمت Console را بررسی و درج کنید، همچنین اگر فایل ها را در یک لینک آنلاین جهت تست قرار دهید بهتر می توان بررسی و دقیقتر راهنمایی کرد، در صورت عدم دسترسی به تست آنلاین و تمایل می توانید فایل ها را به صورت Zip شده به آدرس ایمیل ما (موجود در بخش تماس) ارسال و پاسخ را از همان طریق پیگیری نمائید.
نویسنده: negar
۱۹:۰۹ ۱۳۹۹/۱۲/۰۷
سلام من یه سوال داشتم و نمیدونم که جای درستی رو برای پرسشش انتخاب کردم یا نه ولی ممنون میشم اگه میدونید کمکم کنید در این زمینه، من دارم یک فرم ورود که در نهایت خروجیش باید فاکتور خرید باشه (فرمم نیز در صفحه ای به نام اکشن اعتبار شده و فاکتور نیز باید در همین صفحه ایجاد بشه) تصمیم داشتم که با استفاده از کدهای جاوا اسکریپت و با ایجاد یک فانکشن تعداد کالا و قیمت رو که با استفاده از تگ های html گرفتم ضرب در هم کنه و در نهایت پاسخ را به صفحه اکشن منتقل کنه و نشان بده اما نمیدانم با چه کدی میتوانم مقدار نهایی فانکشن رو به یک صحفه دیگر انتقال دهم لطفا راهنماییم کنید
پاسخ: 
اگر منظورتان انتقال اطلاعات از سمت کاربر (صفحه HTML) به سرور (فایل PHP) است یک راه حل این است که یک فرم (با تگ from) داشته باشید که فیلد یا فیلدهای متنی input به صورت hidden داشته باشد، در نهایت اطلاعات را در فیلدها تنظیم کرده و با JavaScript آن را Submit کنید، مثال:
<?php
$input_1 = @$_POST['input-1'];
$input_2 = @$_POST['input-2'];
$input_3 = @$_POST['input-3'];

echo $input_1 . ' - ' . $input_2 . ' - ' . $input_3;
?>
<script>
function submitForm(){
var form = document.forms['form-1'];
form['input-1'].value = 'your value 1!';
form['input-2'].value = 'your value 2!';
form['input-3'].value = 'your value 3!';
form.submit();
}
</script>
<form name="form-1" action="index.php" method="post">
<input name="input-1" type="hidden">
<input name="input-2" type="hidden">
<input name="input-3" type="hidden">
<input type="button" value="Send" value="ارسال" onclick="submitForm();">
</form>
البته این کد صرفا جهت نمونه است و با متدهای مختلف می توانید اطلاعات را در فرم تنظیم و ارسال کنید، روش دیگر ارسال و دریافت نتیجه با Ajax یا فرمت JSON است که نیاز به آشنایی با مباحث تجزیه اطلاعات با JavaScript و PHP دارد.
نویسنده: سهیل ملکی
۱۶:۲۳ ۱۴۰۰/۰۱/۰۴
سلام خسته نباشید ببخشید من میخوام از تابع navigator.online توی جاوا اسکریپت استفاده کنم تا باهاش بفهمم کاربر آنلاین هست یا نه و اگه بود با جاوا اسکریپت یه مقداری رو پست کنم که پی اچ پی ببینه این کاربر آنلاین هست و بیاد تعداد کاربران آنلاین رو بگیره اما خب مقدار رو بلد نیستم چطور پست کنم میشه راهنمایی کنید ممنون میشم.
پاسخ: 
برای ارسال مقادیر از سمت کاربر به سرور در اینگونه موارد می توانیم از Ajax و متد POST یا GET استفاده کنیم که مباحث مربوطه در آموزش های مقدماتی Ajax به صورت کامل وجود دارد، منتها برای اینکه برنامه هوشمندی داشته باشیم نیاز است که با توابعی مانند setInterval یا با اختصاص addEventListener در جاوا اسکریپت در فواصل زمانی خاصی یا در هنگام تغییر وضعیت آنلاین/آفلاین مرورگر، اطلاعات را آپدیت کنیم.
https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/onLine
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





3 × 7
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form شریفی
در:
سلام مجدد. من یه سوال خیلی تخصصی دارم. ممنون میشم پاسخ بدین. برای پروژه پایان نامه. دارم روی موتورهای جستجوگر تحقیق میکنم. فرض...
۱۴۰۰/۰۱/۲۵

form شریفی
در:
سلام استاد. من از متد file_get_contents استفاده می کنم برای دریافت اطلاعات از سایت های مختلف. بعضی وقتها سایت ها دیر لود میشه. آیا...
۱۴۰۰/۰۱/۲۵

form hh
در:
سلام خدمت شما بنده یه سوال داشتم تمام مراحل شما رو انجام دادم و نتیجه گرفتم و لازمه یه تشکرم بکنم. وبسایت من،...
۱۴۰۰/۰۱/۲۵

form erfan
در:
سلام من واسه یه دکمه یه محتوایی تعریف کردم که وقتی کلیک شد محتوا رو نشون بده اما تو دوجاش موندم یک اینکه چیکار کنم...
۱۴۰۰/۰۱/۲۱

form mahdi
در:
سلام استاد عزیز ، بازم معذرت میخوام سوالام زیاد شد ولی همشون در یک موضوع هستن ، تونستم که با این روش برای هر اسلایدر...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام استاد عزیز عذر میخوام بار سومه پیام میزارم ، مشکلش از ست اینترول بود که قطع نمیشد و با هم تداخل داشتند ولی بدون...
۱۴۰۰/۰۱/۱۸

form mahdi
در:
سلام وقت بخیر استاد عزیز ، یک تابع رو چطور میشه در جاوا اسکریپت اورراید کرد؟ که مثلا با هر فراخوانی مجدد ، قبلی ها...
۱۴۰۰/۰۱/۱۸

form متین
در:
سلام چجوری برای خود صفحه ادرس بسازیم که سایتی که رو ساختیم رو با دستگاه دیگه پیداش کنیم
۱۴۰۰/۰۱/۱۶

form امیرحسین برزویی
در:
من یک وبلاگ دارم و 9 سالمه من در وبلاگم مداحی می گذارم ولی وقتی قاب گذاشتم از این سایت من دیگه فیلم...
۱۴۰۰/۰۱/۱۶

form بنده خدا
در:
سلام خسته نباشین، خدا قوت. یه سوال دارم. چرا در بخش نظردهی وبلاگ به جای عنوان پست می نویسه مطلب مورد نظر یافت نشد؟!...
۱۴۰۰/۰۱/۱۵

form روح الله
در:
موقعی میخواهم وارد سایت ایران خودرو بشم پیام میده از Ip داخلی استفاده کنید دلیلش چیست
۱۴۰۰/۰۱/۱۴

form غریب
در:
تشکر از شما مشکلم حل شد امیدوارم موفق و پیروز باشید هر جا که هستید
۱۴۰۰/۰۱/۱۱

form غریب
در:
سلام مجدد ممنون و تشکر از کمکتون کد به خوبی کار میکنه اما همچنان من مشکلی دارم که حل نتونستم کنم...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام مجدد این کدی که دادید خوب هست ولی من بد و ناقص توضیح دادم توجه کنید کد این هست تقریبا ممنون...
۱۴۰۰/۰۱/۱۰

form غریب
در:
سلام خسته نباشید من کدی دارم که میخوام داخل یه بخشیش نتیجه یه رویداد رو فراخوانی کنم و راهش و نمیدونم اگر میشه کمک...
۱۴۰۰/۰۱/۱۰

form محسن
در:
سلام ، سوال من مربوط به پنل کارگزاری هاست ، وقتی اسم یک سهم (نماد) را در قسمت جست و جو سرچ میکنم...
۱۴۰۰/۰۱/۰۸

form ترجمه
در:
باسلام همه صفحات من دارای دو url می باشد که یکی با حروف کوچک است و دیگری با حروف بزرگ چجوری این مشکل را...
۱۴۰۰/۰۱/۰۸

form سهیل ملکی
در:
سلام خسته نباشید ببخشید من میخوام از تابع navigator.online توی جاوا اسکریپت استفاده کنم تا باهاش بفهمم کاربر آنلاین هست یا نه و اگه بود...
۱۴۰۰/۰۱/۰۴

form Rabbiten
در:
سلام. من چند ماه است که دنبال کد استایل تصویر مثل تبلیغات بالای سایت شما هستم. اما هیچ جا پیدایش نمی کنم. لطف می...
۱۴۰۰/۰۱/۰۱

form mahdi
در:
سلام استاد عزیز سال نو رو تبریک میگم بهتون ، امیدوارم که خودتون و خانوادتون همیشه سالم و سلامت باشید و امسال پر از...
۱۳۹۹/۱۲/۳۰

form korosh abbasy
در:
سلام وقت بخیر ببخشید در مورد این مطلب سوالی پرسیدم شما در مورد output buffering توضیح دادید کد کار نمیکنه میخواستم ببینم نیازی هست من...
۱۳۹۹/۱۲/۲۹

form احمد
در:
سلام مجدد عذرخواهی میکنم یه موردی دیگه بود فراموش کردم در مورد سوال هدر بگم اینکه روی لوکال به هدر ارسال میشه ولی روی هاست...
۱۳۹۹/۱۲/۲۸

form احمد
در:
با سلام خسته نباشید ببخشید قبلا یه سری دستورات جی کوری رو از خودتون گرفتم وقتی فیلدهای فرمم تکمیل شده است توسط هدر بره به...
۱۳۹۹/۱۲/۲۸

form korosh abbasy
در:
سلام دم شما گرم این دستور برای خوندن فایل هم استفاده میشه؟ من میخوام دسترسی تعیین کنم که اگر یک متغییر true...
۱۳۹۹/۱۲/۲۷
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.