شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

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

php

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

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


پیش از اینکه به ادامه آموزش بپردازیم بد نیست در یک جمع بندی کلی با هدف از تکنیک استفاده ترکیبی جاوا اسکریپت (JavaScript) و PHP آشنا شویم.
شرایطی که باعث می شود از جاوا اسکریپت و PHP به صورت ترکیبی استفاده کنیم اغلب به مواردی مربوط می شوند که بخواهیم به طور مثال محتوای داینامیک خروجی داده شده توسط کدهای PHP را به صورت فریم در صفحات HTML نمایش دهیم، به طور مثال فرض کنید فایل PHP با آدرس زیرپیج رنک سایت مورد نظر را محاسبه و به صورت آیکن نمایش می دهد.
http://www.yoursite.com/page_rank.php?url=$url&img=5
واضح است که اگر مقدار متغیر url درج شده در کد بالا را به صورت دستی تنظیم و این آدرس فرضی را در نوار آدرس مرورگر وارد کنیم احتمالا آیکن پیج رنک به نمایش در می آید، اما مشکل ما اجرای این کار به صورت خودکار و در صفحات وب است که امکان درج و اجرای مستقیم دستورات PHP در صفحات HTML وجود ندارد و از طرفی تمام و شاید اغلب کاربران این امکان را ندارند که از دستورات سمت سرور در وبلاگ ها استفاده کنند و محتوای فایل PHP را نمایش دهند، به همین خاطر باید به دنبال یک واسطه بین فایل های داینامیک PHP و صفحات استاتیک HTML باشیم، این واسطه چیزی نیست جزء دستورات زبان جاوا اسکریپت (JavaScript) که به راحتی می توان به کمک آن و تنها با چند خط کدنویسی ساده به هدف مورد نظر رسید و کد نهایی را به شکل نمونه زیر تغییر داد.
<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 مطالب بیشتر:
ساخت دکمه رفتن به بالای صفحه (Scroll to Top) با جاوا اسکریپت
چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟
اعتبارسنجی فرم های وب با جاوا اسکریپت (JavaScript)
کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
نمایش کادر پیام شناور در سایت و وبلاگ با جاوا اسکریپت
دیدگاه
more ۸۵ دیدگاه برای این مطلب ارسال شده است.
more چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.
aliariyaee
۱۱:۴۱ ۱۳۹۳/۱۱/۱۶
ببخشید من میخاستم بدونم که چطوری میشه یه کدی حالا فرق نمیکنه چی باشه مثلا یه کد قالب یا یک کد ابزار برای وبلاگ که کد بصورت مثلا html نوشته شده چجوری میتونیم اون رو به جاوا اسکریپت تبدیل کنیم لطفا هم اینجا راهنمایی کنید و حتما از طریق ایمیل هم بهم اطلاع دهید.
با تشکر از سایت بسیار خوبتان
هرچند منظورتان از تبدیل به جاوا اسکریپت مشخص نیست! اما حدس ما این است که می خواهید ابزارها را به صورت کد به کاربران جهت درج در سایت یا وبلاگ ارائه کنید، در این صورت پاسخ کوتاهی برای سوال وجود ندارد، آموزش حاضر به نوعی در همین رابطه است، در صورتی که این آموزش را درک کنید و کمی برنامه نویسی وب بلد باشید، به پاسخ سوالتان خواهید رسید.
حسن
۱۶:۱۹ ۱۳۹۳/۱۰/۱۴
آقا سلام یه سوال داشتم که منو خیلی درگیر خودش کرده!
اینه که در صفحه 1 من یه لینکی دارم که وقتی روش کلیک میشه صفحه 2 باز بشه یه سری چیزها رو چک کنه و اگه درست بود از طریق جاوا اسکریپت متن اون لینک داخل صفحه 1 رو عوض کنه
آیا همچین چیزی امکان داره؟!
راه حل دیگه ای واسه این مشکل سراغ دارین؟!
سلام
چنین حالتی در وب امکانپذیر نیست! به نظر باید از Ajax و JavaScript + PHP استفاده کنید، به این صورت که با کلیک بر روی لینک، درخواست Ajax به سرور (صفحه مورد نظر) ارسال، فرآیند بررسی با PHP مطابق با هدف شما انجام و پاسخ سرور به صفحه اصلی ارسال و توسط JavaScript تغییرات متناسب با پاسخ در صفحه اصلی اعمال شود.
هادی
۲۳:۵۵ ۱۳۹۳/۱۰/۰۲
خیلی خیلی ممنون دستتون درد نکنه مهندس جان و شرمنده بخاطر اینکه زودتر نتونستم تشکر کنم ازتون ایشالا همیشه موفق باشید.
هادی
۰۰:۱۴ ۱۳۹۳/۱۰/۰۲
خیلی خیلی ممنون از سایت خوبتون و از سرعت عملتون در کمک به من
همیشه موفق و پیروز باشید
هادی
۱۶:۵۶ ۱۳۹۳/۱۰/۰۱
شرمنده یه سوال دیگه هم دارم
<form action="page2.php" method="post">
<input type="text" name="txt" id="txt">
<input type="submit" name="submit" id="submit" value="submit">
</form>
که داخل کدها باشه به محض کلیک روی submit به page2.php منتقل میشیم.
اما میخواهیم تکست باکس های داخل این صفحه بکمک js اعتبارسنجی بشن.
حالا چیکار کنیم که وقتی نتیجه اعتبارسنجی صحیح بود به page2.php منتقل بشیم.
(حتی الامکان نمیخوام method , action رو از form حذف کنم تا بتونم در صفحه page2.php توسط متد POST محتوای تکست باکس رو بخونم تا امنیت داده ها حفظ بشه)
ممنون میشم اگه سریع تر جواب سوال هامو بدین چون دارم رو یه پروژه کار میکنم و لنگ این دوتا سوالم.
بازم ممنون از سایت خوبت
برای این مورد باید به فرم خود در رویداد onsubmit یک تابع جاوا اسکریپتی بدهید که تابع، فیلدها را بررسی و اگر خطایی وجود داشت false برگرداند، نمونه کدها در آموزشی تحت عنوان "اعتبار سنجی فرم های وب با جاوا اسکریپت" در سایت وجود دارد، لطفا در وب جستجو کنید.
هادی
۱۶:۴۱ ۱۳۹۳/۱۰/۰۱
سلام مهندس خسته نباشی
یه سوال دارم
من js رو کمی یاد گرفتم اما نمیدونم چطور خروجی های توابع js داخل php و بلعکس رو بگیرم
مثلا داخل js تابع testjs رو داریم که یه مقدار بر میگردونه و داخل php هم تابع testphp رو داریم که یه مقدار برمیگردونه، چطور از تابع testjs درون php و از توابع testphp درون js مقداری که برمیگردونن رو بگیرم؟!
سلام
PHP یک زبان سمت سرور و JS زبان سمت کاربر است، لذا این دو اساسا از هم جدا هستند، اما برای ارتباط با هم در مورد خروجی توابع PHP برای جاوا اسکریپت، می توانید هنگام چاپ خروجی، کدنویسی HTML را با دستورات PHP ترکیب کنید، به فرض:
<script type="text/javascript">
function func_1(<?php echo getNum(); ?>){
}
</script>
که در این مثال ساده آرگومان تابع فرضی func_1 توسط تابع getNum در PHP چاپ می شود!
در حالت عکس باید از Ajax استفاده و پارامترها را به سرور ارسال کنید که خود بحث مجزایی دارد.
مرتضی
۱۶:۲۷ ۱۳۹۳/۰۹/۱۱
سلام
در نرم افزار xampp چگونه می توان تنظیمات php را تغییر داد مثلا استادارد assci را به utf-8 تغییر بدیم.
با تشکر فراوان
سلام
تنظیمات برنامه های سرور مجازی در فایلی به نام httpd.conf در یکی از زیرشاخه های آنها قرار دارند (با توجه به برنامه ممکن است کمی فرق کند، برای دسترسی راحتتر نام را در دایرکتوری برنامه جستجو کنید)، به طور مثال با افزودن خط زیر به دستورات موجود، می توان استاندارد پیش فرض سرور را به utf-8 تغییر داد:
AddDefaultCharset utf-8
ضمن اینکه این کار از طریق htaccess. نیز امکانپذیر است.
مهدی
۰۴:۵۲ ۱۳۹۳/۰۷/۳۰
سلام
بازم ممنون از مطالب بسیار عالیتون
عزیز من دنبال یه کد پی اچ پی جاوا میگردم که مثل سایت آپارات در کدی که میده برای قرار دادن تو وبسایت و وبلاگ، قابلیت انتخاب اندازه فایل رو داشته باشه
یا بهتر بگم : وقتی روی 360 * 640 کلیک میکنی اون میاد این مقدار رو در width . height جایگذاری میکنه.
اصلا نمیدونم باید دنبال چی بگردم
ممنون میشم راهنمایی کنید.
سلام
برای این کار باید جاوا اسکریپت بلد باشید تا بتوانید کد را به صورت داینامیک ایجاد و در باکس مورد نظر قرار دهید، متاسفانه توضیح کوتاهی ندارد و نیازمند آموزشی جداگانه است.
رضا
۰۵:۱۱ ۱۳۹۳/۰۷/۲۵
سلام
قربان من هرچی تلاش کردم نتونستم برای فایل php فیدخوانی که در آموزش دیگری از همین سایت یاد گرفتم یک کد جاوا بسازم میشه با توجه به آموزشی که در سایت برای ساخت خبرخوان قرار داده بودید این آموزش رو هم مرتبط کنید .
من الان یک فایل php طبق آموزش شما برای جمع اوری آخرین مطالب در rss ساختم و حالا میخوام با توجه به این آموزش به جای استفاده از iframe از کد جاوا استفاده کنم مانند کدهایی که سایت های ارائه ابزار وبلاگ میدناما هرچی تلاش میکنم به نتیجه نمیرسم ...
میشه یکم واضح تر با توجه به هدف توضیح بدید.
پیشاپیش سپاسگذارم
سلام
توضیحات در آموزش حاضر تا جایی که امکان داشته کامل و به صورت جزئی گفته شده که به طور کلی برای هر نوع کد PHP صدق می کند، این احتمال وجود دارد که در روش شما ایرادات جزئی وجود داشته باشد (مانند خطای syntax)، کدهای خود یا آدرس یک نمونه صفحه را از طریق ایمیل (موجود در بخش تماس) ارسال کنید تا بررسی گردد.
ماهان
۱۷:۳۵ ۱۳۹۳/۰۷/۱۶
درود
امکانش هست فراخوانی یک فایل HTML رو داخل جاوا اسکریپ برای ما شرح بدید، دقیقا منظور برچیدن iframe های اضافی تو سایت هست منتها فقط با فراخوانی توسط جاوا اسکریپ
تشکر
سلام
تا آنجا که اطلاع داریم چنین امکانی با صرف جاوا اسکریپت مقدور نیست، باید ترکیبی از Ajax، PHP و JavaScript را به کار بگیرید که در آموزش های Ajax توضیح داده شده.
امین
۰۱:۳۴ ۱۳۹۳/۰۶/۱۶
با تشکر از پست بسیار مفید و کاربردی که هیج جای دیگه پیداش نکردم ولی در وبگو به طور واضح توضیح داده شده
Ali Zeus
۱۳:۰۲ ۱۳۹۳/۰۵/۳۰
با سلام مجدد..... مشکلم حل شد
با یک فانکشن جاوا و انکلیک روی دکمه سابمیت درستش کردم
ممنون از مطالب مفیدتون
Ali Zeus
۱۲:۳۲ ۱۳۹۳/۰۵/۳۰
با سلام و خسته نباشید
ببخشید من همیشه سوال هام با مطلب اصلی شما متفاوته
سوالم اینه که چطور میشه علامت سوال رو از ادرس ایجاد شده از متد GET حذف کنم یا ادرس رو تغیر بدم که به نظر با جاوا اسکریپت امکانش باشه
من با اچ تی اکسز ادرس فایل دریافت کننده متغیر گت رو تغییر دادم و حالا میخام اگه میشه فرم مربوطه متغیر رو به ادرس جدید بفرسته
//مثال ادرس زیر رو
www.example.com/Profile/View_Profile.php?username=value
به ادرس
www.example.com/Profile/(value)
تبدیل کردم و حالا میخام فرم مربوطه اطلاعات کاربر رو به ادرس جدید بفرسته که کاربر حتی از وجود همچین فایلی هم مطلع نشه. ایا امکانش هست؟
//میتونم بعد از ارسال متغیر، کاربر رو به با متغیر به ادرس جدید دایورت کنم ولی میخوام کاربر اصلا به ادرس قبلی نره و فرم مستقیما به ادرس جدید ارسال شه
بسیار ممنون
amin
۱۸:۵۹ ۱۳۹۳/۰۳/۰۱
سلام خسته نباشید
من کدی دارم درون فایل جاوا اسکریپت که به صورت زیر میباشد
var numSmilies = function(a){
self.numsmiles++;
if(self.numsmiles <= '1'){
return ('<img src="smilies/'+a+'.gif" alt="(s'+a+')">');
}else{
return(a);
}
}
var addmessage = function(params){
var win_id1 = new Array();
var count_priv_win = 0;

with(params){
message = message.replace("خخخخخ", '(m592)');
message = message.replace("ههههه", '(m594)');
message = message.replace("خخخخخ", '(m592)');
من میخوام قسمت:
if(self.numsmiles <= '1'){
اون عدد یک رو از داخل پایگاه داده بخونه یعنی متغیر باشه اگر داخل پایگاه داده عدد 2 یا .. باشد نتیجه ی کد عوض بشه 1 تغییر کند به 2 یا هر عدد دیگری که درون پایگاه داده هست
سلام
به روش های مختلف انجام این کار ممکن است، به طور مثال به جای استفاده مستقیم از عدد، از یک متغیر برای این کار استفاده کنید، به فرض متغیر را به صورت global و بدون استفاده از عبارت var در هنگام ارسال خروجی PHP در یک تگ script جداگانه (یا در همان تگ) چاپ کنید تا در HTML DOM در دسترس باشد، به این صورت در سایر توابع جاوا اسکریپتی مقدار متغیر در دسترس خواهد بود، مثال:
<script type="text/javascript">
numsmiles = 5;
</script>
<script type="text/javascript">
function alertIt(){
alert(numsmiles);
}
alertIt();
</script>
۲۱:۳۱ ۱۳۹۳/۰۱/۲۵
با سلام مجدد
فرمودید که این واسطه فقط ای جکس است! اما واقعاً این گونه نیست! راه پیشنهادی بنده به صورت زیر است که اخیراً با آزمایش و خطا پیدا کردم و هم اکنون در سایت خودم از آن استفاده می کنم: ابتدا در یک فایل php مثلاً با نام index اطلاعات دیتابیس را وارد کنید به گونه ای که در خط اول آن دستور
$_GET
باشد برای گرفتن مقادیر ارسالی و در آخر نیز دستور php و جاوا اسکریپت زیر:
echo "document.write(\"<b>" . $count . "</b>\")";
برای چاپ مقدار count که در واقع تعداد کلیک هاست؛
سپس در داخل فایل html و در بخش مناسب، دستور زیر را وارد کنید:
<script type="text/javascript" language="javascript" src="http://yoursite.ir/index.php?id=1" ></script>
با این دستور مثلاً مقدار 1 به فایل index ارسال و مقدار متناظر count چاپ می شود. در صفحه ی زیر به طور عملی نتیجه ی این دستورات را مشاهده خواهید فرمود که تعداد بازدید هاست:
http://www.epmath.ir/Education/Riyazi1_ch1.htm
ممنون می شوم اگر نظرتان را در این رابطه مطرح فرمایید.
با تشکر
سلام
دوست گرامی در سوال اول گفتید که نمی خواهید از PHP استفاده شود! در سوال دوم هم خواستید که اطلاعات را از جاوا اسکریپت به PHP ارسال کنید! اما در راه حلتان ابتدا دستورات PHP را تنظیم کردید تا خروجی داشته باشید (آن هم با echo که مستقیما باید در صفحه PHP اجرا شود) و سپس از جاوا اسکریپت برای چاپ، نمایش و...
این کار متداولی در وب است، هر چند مشخص نیست وقتی می توان از PHP با ضریب اطمینان بیشتر استفاده نمود، چرا باید جاوا اسکریپت را دخیل کرد (مگر اینکه دقیقا بدانید چه می کنید و چه نیازی دارید).
به هر صورت اگر به آموزش حاضر توجه کنید، بی شباهت به راه حل شما نیست.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
6 × 4
20 × 20
=