یکشنبه ۱۵ مهر ۱۴۰۳

Sunday, October 6, 2024 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 مطالب بیشتر:
نمایش پیام در حال بارگذاری با جاوا اسکریپت (JavaScript)
نمایش کادر پیام شناور در سایت و وبلاگ با جاوا اسکریپت
اعتبارسنجی فرم های وب با جاوا اسکریپت (JavaScript)
کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
ساخت دکمه رفتن به بالای صفحه (Scroll to Top) با جاوا اسکریپت
دیدگاه
more ۸۵ دیدگاه برای این مطلب ارسال شده است.
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
۲۳:۵۵ ۱۴۰۰/۰۴/۳۰
ممنون آینده کاری پی اچ پی خوبه یا جاواسکریپت؟
معمولا برنامه نویس وب باید به هر دو زبان (سرور - کلاینت) مسلط باشد اما جاوا اسکریپت در ایران به صورت فریلنسری پروژه کمتری دارد چون اغلب افزونه و قالب ها و... مبتنی بر PHP هستند، اما به صورت کلی یادگیری JavaScript در موقعیت های بیشتری (استخدام در شرکت ها، ساخت بازی، برخی برنامه ها و...) کاربرد دارد تا PHP.
سیاوش
۱۸:۰۳ ۱۴۰۰/۰۶/۲۷
سلام و کد اجاکس زیرو دارم استفاده میکنم، که میخوام مقداره (p_price) رو بگیرم و ببرم تو دیتابیس ذخیره کنم، ولی هرکاری میکنم نمیشه!!! راهنماییم میکنین؟ تشکر
<script>
$('#count').on('click', function(e){
var _this = this;
var _val = $(this).val();
//var _price = check_price($('#product').val());
var _price = check_price($('#count').val().split('-')[1]);
});

function check_price(p_price) {
var p = p_price;
$('#tedadekala').val(p);

document.write(<?php $tedad = p_price; ?>);
document.write(<?php addtoshopingcart($id_ads,$tedad,$userip); ?>);

return p
}
</script>
کد شما ایرادات زیادی دارد و برای رفع همه آنها باید کل برنامه بررسی و امکان آزمایش و خطا فراهم باشد که زمانبر است، به طور مثال در این قستمی که درج کرده اید هیچ متد Ajax استفاده نشده است، متد Ajax مانند:
var form_data = 'p_price=' + "p_price" + '&param_2=value_2'; //name value pair
//var form_data = {p_price:"p_price", param_2:"value_2"}; //array

$.ajax({
url : "http://example.com/get.php",
type: "POST",
data : form_data,
success: function(data, textStatus, jqXHR){
alert(1);
},
error: function (jqXHR, textStatus, errorThrown){
alert(0);
}
});
ترکیب دستورات PHP و JavaScript هم درست نیست و اگر می خواهید در خروجی مقادیر چاپ شود باید از echo استفاده کنید، به فرض:
document.write(<?php echo $tedad; ?>);
رفیع حق شناس
۰۲:۲۷ ۱۴۰۱/۰۱/۰۸
با سلام و خسته نباشید
ببخشید راهی وجود داره مثلا وقتی متنی رو echo می کنیم خروجیش توی یه کادر نشون داده بشه؟ مثل textarea که متن رو میشه راحت انتخاب کرد واسه گوشی میخوام چون لپ تاپ ندارم و کار کردن با گوشی هم راحت نیست میخوام خروجی که ازش echo گرفتم توی یه باکس نشون داده بشه حالا چه با جاوا و چه با هر چیز دیگه ای مثل همین text area ارسال دیدگاه شما که متن رو میشه پاک کرد، کپی کرد و یا انتخاب کرد
ممنون میشم کمکم کنید
با تشکر فراوان
مشابه نمونه کد زیر در PHP می توانید متن را در textarea خروجی دهید:
<?php
$str = 'نمونه متن';
echo '<textarea style="height: 200px; width: 100%; padding: 8px; direction: rtl;">' . $str . '</textarea>';
?>
علی
۰۷:۱۳ ۱۴۰۲/۰۱/۲۵
با سلام و درود
اگر همین کد رو مستقیم در یک فایل جاوا وارد کنیم چرا اجرا نمیشه؟
و اگر بخواهیم اجرا بشه باید چطور بنویسیم؟
ممنون...
document.write('<?php
echo "ترکیب جاوا اسکریپت و PHP";
?>'
);
کدهای PHP برای اجرا باید در یک فایل با پسوند php باشند و فایل های جاوا اسکریپت پسوند js دارند، به همین دلیل اگر کد را مستقیم اجرا کنید عبارت درون کوتیشن ها عینا به عنوان خروجی متنی در صفحه چاپ می شود و دستورات PHP آن بی اثر می شوند، ترکیب JavaScript و PHP برای افزودن قابلیت هایی است که ابتدا باید در سرور اجرا و سپس در مرورگر با دستورات جاوا اسکریپت ترکیب شوند.
علی
۰۵:۳۷ ۱۴۰۲/۰۱/۲۷
با سلام و عرض ادب
می خواستم کار با پایگاه داده در جاوا رو یاد بگیرم (ورود اطلاعات در دیتابیس و آپدیت و حذف آن ها) ولی نتونستم در سایت پیدا کنم اگر آموزشش هست ممنون میشم لینکش رو بدین
با سپاس فراوان
اگر منظورتان از جاوا JavaScript است این زبان در حالت معمول در سمت کاربر اجرا می شود و در این حالت ساز و کار مستقیمی برای اتصال به دیتابیس فراهم نیست (برای نگهداری اطلاعات در مرورگر از localStorage یا کوکی استفاده می کنیم)، برای اتصال مستقیم به دیتابیس باید از زبان های سمت سرور مثل PHP یا Node.js (جاوا اسکریپت مستقل از مرورگر) استفاده کنیم، برای PHP آموزش ها در سایت وجود دارد اما برای Node.js لطفا در وب جستجو کنید.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
9 × 6
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
سیدعباسی
با سلام من میخوام از متن زیر لینکش رو دربیارم و در آخر مقدار 3088 رو بصورت خروجی نهایی داشته باشم با...
۱۴۰۳/۰۷/۰۷

مجتبی
سلام وقت بخیر میخوام یک روز به تاریخ دریافتی اضافه شه ممنون میشم راهنمایی کنید
۱۴۰۳/۰۶/۲۰

پرتو
سلام خوبید؟ خسته نباشیذ ببخشید مزاحم شدم می خواستم بگم من به شما ایمیل زدم ولی هنوز شما جواب ندادین می تونم بپرسم چرا سوال...
۱۴۰۳/۰۶/۱۵
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.