Ajax یکی از تکنولوژی‌های مهم در وب است که به شما این امکان را می‌دهد تا درخواست‌های غیرهمزمان به سرور ارسال کنید و بدون بارگذاری مجدد صفحه، داده‌ها را دریافت و نمایش دهید. در این مقاله، به آموزش نحوه اتصال فرانت اند به جت انجین با ajax خواهیم پرداخت.

مقدمه‌ای بر جت انجین

JetEngine یکی از قوی‌ترین افزونه‌ها برای وردپرس است که به شما این امکان را می‌دهد که با استفاده از پست تایپ‌های سفارشی، متا فیلدها و روابط بین پست‌ها، برنامه‌های کاربردی پیچیده‌ای بسازید. این افزونه به شدت به توسعه‌دهندگان کمک می‌کند تا بدون نیاز به کدنویسی سنگین، وب‌سایت‌های پویا بسازند.

راه‌ اندازی Ajax در جت انجین

برای استفاده از ajax در jetengine، مراحل زیر را دنبال کنید:

۱. ایجاد یک Action در PHP

ابتدا باید یک اکشن در فایل functions.php یا یکی از افزونه‌های خود اضافه کنید تا درخواست‌های Ajax را پردازش کند.

add_action('wp_ajax_my_ajax_action', 'my_ajax_handler');
add_action('wp_ajax_nopriv_my_ajax_action', 'my_ajax_handler');

function my_ajax_handler() {
    // دریافت داده‌های ورودی
    $data = $_POST['myData'];

    // انجام پردازش‌های لازم
    
    // ارسال پاسخ به frontend
    wp_send_json_success($data);
}

در کد بالا، ما دو اکشن اضافه کردیم: یکی برای کاربران لاگین شده و دیگری برای کاربران غیر لاگین.

۲. ارسال درخواست Ajax از frontend

برای ارسال درخواست Ajax، از jQuery استفاده می‌کنیم. ابتدا باید اطمینان حاصل کنید که jQuery در صفحه شما بارگذاری شده است.

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#myButton').click(function() {
        var myData = $('#myInput').val();

        $.ajax({
            type: 'POST',
            url: ajaxurl, // متغیر ajaxurl در وردپرس از پیش تعریف شده است
            data: {
                action: 'my_ajax_action',
                myData: myData
            },
            success: function(response) {
                if (response.success) {
                    alert('Data received: ' + response.data);
                } else {
                    alert('Error occurred');
                }
            }
        });
    });
});
</script>

در اینجا، هنگامی که کاربر بر روی دکمه کلیک می‌کند، یک درخواست Ajax به سرور ارسال می‌شود و پاسخ دریافت شده با یک پیام نمایش داده می‌شود.

آموزش جت انجین

۳. نمایش داده‌ها

می‌توانید داده‌های برمی‌گردانده شده را در هر جایی از صفحه به نمایش درآورید. برای این کار، به سادگی می‌توانید از متدهای jQuery برای افزودن آن‌ها به عناصر DOM استفاده کنید.

<div id="responseContainer"></div>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#myButton').click(function() {
        var myData = $('#myInput').val();

        $.ajax({
            type: 'POST',
            url: ajaxurl,
            data: {
                action: 'my_ajax_action',
                myData: myData
            },
            success: function(response) {
                if (response.success) {
                    $('#responseContainer').html('Data received: ' + response.data);
                } else {
                    $('#responseContainer').html('Error occurred');
                }
            }
        });
    });
});
</script>

جمع‌ بندی

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