آموزش استفاده از ایجکس(jQuery Ajax) در وردپرس(مثال استان و شهر)

در یکی دیگر از آموزش های توسعه وردپرس می خواهیم چگونگی ارسال درخواست های ایجکس(Ajax) را به کمک کتابخانه جی کوئری(jQuery) در قالب یک مثال کاربردی بررسی کنیم، در این مثال شهرهای هر استان به صورت ایجکسی فراخوانی و به کاربر نشان داده می شود.

فراخوانی ایجکس در وردپرس

 

اما برای درک بهتر این آموزش پیشنهاد می کنیم ابتدا مقالات زیر را مطالعه فرمائید(اگر وقت کافی دارید):

  1. روش صحیح و اصولی استفاده از jQuery در وردپرس
  2. دیتابیس وردپرس: مقدمه ای بر کلاس wpdb
  3. نانس(Nonce) دیواری محکم در مقابل حملات CSRF
  4. آشنایی با ساختار جداول در دیتابیس وردپرس

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

گام اول: ایجاد جدول شهرها و استان ها

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

همانطور که در تصویر زیر ملاحظه می کنید id هر استان در فیلد parent_id شهرهای متعلق به آن استان قرار دارد، و مقدار parent_id استان ها دارای مقدار NULL می باشد، می توانستیم این کار را با دو جدول مستقل به نام های مثلا wp_cities و wp_states نیز انجام دهیم.

ایجاد جدول استان و شهر در وردپرس

 

برای ایجاد جدول wp_states اسکریپت زیر را از طریق phpMyAdmin اجرا نمائید و سپس تعدادی استان و شهر را به صورت دستی وارد کنید.

CREATE TABLE `wp_states` (
  `id` int(11) NOT NULL,
  `parent_id` int(11) DEFAULT NULL,
  `title` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

 

گام دوم: ایجاد شورتکد

در این مرحله برای نمایش شهرها و استان ها از شورتکد(Shortcode) استفاده می کنیم تا کاربر بتواند آن را در صفحه یا نوشته مدنظر خود فراخوانی کند، پس کدهای زیر را در فایل functions.php قالب وب سایت تان قرار دهید.

function st_get_states(){
    ob_start();
    include "states-template.php";
    return ob_get_clean();
}

add_shortcode( "display_states", "st_get_states" );

 

چند نکته در رابطه با کدهای بالا:

  1. برای استفاده از این شورتکد کافی است [display_states] را در صفحه یا نوشته مدنظرتان وارد کنید.
  2. برای مدیریت بهتر سورس، کدهای HTML و PHP را در فایل states-template.php قرار می دهیم و آن را از طریق شورتکد include می کنیم.

گام سوم: ایجاد فایل states-template.php

فایل states-template.php را در روت قالب ایجاد کرده و کدهای زیر را در آن قرار می دهیم.

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <label for="states">استان</label>
                <select class="form-control"
                        id="states"
                        name="states"
                        data-ajax="<?php echo admin_url( 'admin-ajax.php' ); ?>"
                        data-nonce="<?php echo wp_create_nonce( 'load-cities-nonce' ) ?>">
                          <?php
                             global $wpdb;
                             $states = $wpdb->get_results( "SELECT * FROM " . $wpdb->prefix . "states WHERE parent_id IS NULL" );
                             foreach ( $states as $state ) {
                           ?>
                                  <option value="<?php echo $state->id; ?>">
                                        <?php echo $state->title; ?>
                                  </option>
                          <?php
                                }
                           ?>
                </select>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-group">
                <label for="cities">شهر</label>
                <select id="cities" name="cities" class="form-control">
                </select>
            </div>
        </div>
    </div>
</div>

 

چند نکته در رابطه با کدهای بالا:

  1. با تابع admin_url مسیر فایل admin-ajax.php که در دایرکتوری wp-admin قرار دارد را بدست می آوریم، وردپرس از این فایل برای فراخوانی های ایجکس استفاده می کند.
  2. برای امنیت بیشتر با تابع wp_create_nonce رشته نانس را تولید می کنیم، از این مقدار در هنگام فراخوانی شهرها استفاده می شود.
  3. مقادیر data-ajax و data-nonce را در مراحل بعدی به کمک jquery فراخوانی خواهیم کرد.
  4. لیست استان ها را با کلاس wpdb از دیتابیس وردپرس و جدول wp_states دریافت می کنیم، به WHERE parent_id IS NULL دقت کنید.
  5. در یک حلقه foreach لیست استان ها را به کمک select option تولید می کنیم، id هر استان در خصوصیت value قرار می گیرد چرا که در مرحله بعد با آن احتیاج داریم.
  6. اگر به کدهای انتهایی که مربوط به لیست شهرهاست دقت کنید چیزی مشاهده نخواهید کرد چرا که این لیست به صورت داینامیک از طریق jquery تولید خواهد شد.
  7. کلاس های container، row، col-md، form-control و form-group مربوط به کتابخانه Bootstrap می باشد.

گام چهارم: ایجاد فایل جاوا اسکریپت

یک فایل جاوا اسکریپت به نام (مثلا custom.js) در قالب وب سایت ایجاد کرده و کدهای زیر را در آن قرار می دهیم.

( function ( $ ) {

    function getCities( element ) {

        let stateID = element.value,
            ajaxUrl = $( element ).data( 'ajax' ),
            nonce = $( element ).data( 'nonce' );

        $.ajax({
            url: ajaxUrl,
            type: 'POST',
            data: {
                state_id: stateID,
                security: nonce,
                action: 'st_get_cities'
            },
            success: function ( data ) {
                let html = '';
                $.each( data, function ( i, item ) {
                    html += "<option value=" + item.id + ">" + item.title + "</option>";
                });
                $( "#cities" ).html( html );
            }
        })
    }

    $( '#states' ).on( 'change', function () {
        getCities( this );
    });

    $( '#states' ).trigger( 'change' );

})( jQuery );

 

چند نکته در رابطه با کدهای بالا:

  1. در صورتی که کاربر استانی را انتخاب کند رویداد change اتفاق می افتد و id استان در متغیر stateID$ ذخیره می شود.
  2. همانطور که ملاحظه می کنید مقادیر data-ajax و data-nonce گام قبل را در این مرحله بدست می آوریم.
  3. state_id، security و action ارگومان هایی هستند که با متد post به تابع st_get_cities ارسال می شود.
  4. تابع st_get_cities با استفاده از state_id لیست شهرهای هر استان را باز می گرداند.
  5. حلقه foreach نیز لیست شهرها را تولید می کند.

گام آخر: دریافت شهرهای هر استان

در نهایت کدهای زیر را در فایل functions.php قرار می دهیم.

function st_ajax_get_cities() {
    check_ajax_referer( 'load-cities-nonce', 'security' );
    global $wpdb;
    $stateID = esc_attr( $_POST['state_id'] );
    $cities = $wpdb->get_results( $wpdb->prepare( "SELECT * FROM " . $wpdb->prefix . "states WHERE parent_id=%d", $stateID ));
    wp_send_json( $cities );
    wp_die();
}

add_action( "wp_ajax_st_get_cities", "st_ajax_get_cities" );
add_action( "wp_ajax_nopriv_st_get_cities", "st_ajax_get_cities" );

 

چند نکته در رابطه با کدهای بالا:

  1. تابع check_ajax_referer رشته نانس را اعتبار سنجی می کند.
  2. به id استان انتخابی از طریق آرایه POST_$ دسترسی پیدا می کنیم.
  3. wp_send_json لیست شهرها را با فرمت JSON به مرحله قبل باز میگرداند.
  4. wp_ajax و wp_ajax_nopriv اکش های موردنیاز برای کار با ایجکس در وردپرس هستند، st_get_cities برای شما آشنا نیست؟

جمع بندی

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

نظرات و سوالات کاربران

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *