آموزش استفاده از ایجکس(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 برای شما آشنا نیست؟

جمع بندی

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

برچسب ها
سعید یاورنیا 117 نوشته 118 دیدگاه

توسعه دهنده وب، کارشناس ارشد نرم افزار.

دیدگاه ‌ها

  • سلمان ۲۲ آذر ۱۳۹۸ - ۲۳:۴۳

    سلام

    کپی از کدها و روش ها و ترفندهای این آموزش حلاله؟ آخه تو فوتر گفتید حقوق مادی و معنوی محفوظه، با تشکر

  • علی ۱۷ فروردین ۱۳۹۹ - ۱۷:۴۸

    سلام اگه بخوام از دوتا جدول استفاده کنم باید چکار کنم میشه یکم راهنمایی کنید ؟

    • سعید یاورنیا ۱۷ فروردین ۱۳۹۹ - ۲۰:۴۹

      درود بر شما دوست عزیز.

      در MySQL یک جدول برای استان ها به نام wp_states با فیلدهای id و title و یک جدول هم برای شهرها به نام wp_cities با فیلدهای id، title و state_id ایجاد کنید.

      این دو جدول باید با هم رابطه یک به چند یا اصطلاحا one-to-many داشته باشند، برای همین state_id رو به wp_cities اضافه کردیم.
      در واقع state_id کلید خارجی جدول wp_cities است.

      حالا در سمت فرانت کافیه استان ها رو با کوئری زیر از جدول wp_states دریافت کنید و id هر استان رو در ویژگی value تگ select option نگهداری کنید.

      select id, title from wp_states

      وقتی کاربر یک استان رو انتخاب میکنه از طریق Ajax آیدی استان را به کوئری زیر ارسال کنید، فرض کنید XY آیدی استان است.

      select id,title from wp_cities where state_id=XY

      حالا در select option دوم شهرهای مرتبط با استان انتخابی را لود کنید، id شهر هم در ویژگی value تگ select option ست کنید.

      در نهایت اگر می خواهید استان و شهر انتخابی کاربر رو در جایی مثلا فیلد سفارشی نگهداری کنید فقط id جدول wp_cities را ذخیره کنید، چون بعدا از طریق کوئری زیر می تونید به استان موردنظر هم دسترسی داشته باشید.
      فرض کنید YY آیدی شهر ذخیره شده است.

      select * from wp_cities c join wp_states s on c.state_id=s.id where c.id=YY

  • علی ۱۸ فروردین ۱۳۹۹ - ۲۱:۳۱

    ممنونم بابت پاسخ شما ، “select id,title from wp_cities where state_id=XY” این کوئری رو تو قطعه کد functions.php انجام بدم؟

    بعد “حالا در select option دوم شهرهای مرتبط با استان انتخابی را لود کنید، ” این رو به چه صورت لود کنم ؟

    • سعید یاورنیا ۱۸ فروردین ۱۳۹۹ - ۲۳:۱۳

      خواهش می کنم
      پاسخ سوال اول شما در “گام آخر: دریافت شهرهای هر استان” آموزش داده شده فقط باید همین کوئری رو جایگزین کنید.
      پاسخ سوال دوم هم در “گام چهارم: ایجاد فایل جاوا اسکریپت” موجود است.
      در کل تنها کاری که باید انجام بدید تغییر کوئری گام آخر هستش با کوئری جدید.

  • علی ۱۹ فروردین ۱۳۹۹ - ۱۲:۳۲

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

  • ایدین ۱۹ خرداد ۱۳۹۹ - ۲۱:۴۸

    سلام ، من میخوام اطلاعات یک دکمه و یک تاگل و یک فرمو با تعریف فانکشن مربوط به هر کدوم تو یک فایل جاوا اسکریپت به یک فایل پی اچ پی بفرستم و این کارو با xml خارج از وردپرس انجام میدم ولی تویه وردپرس چطوری میتونم این سه محتوا رو با جاوا اسکریپت به یک فایل پی اچ پی با یک مسیر خاص مثلا در روت ( مسیر پلاگین و تم نباشه ) بفرستم و پردازش کنم ؟! با adminajax چطوری میتونم اطلاعاتی که میگیرمو با متد پست و گت به فایل پی اچ پی مثلا با مسیر example.com/api/form1 ارسال کنم . ممنون از وبسایت خوبتون

  • ایدین ۲۱ خرداد ۱۳۹۹ - ۰۳:۴۲

    تشکر بابت راهنمایتون .
    HTTP API بهتر و امن تره یا REST API برای ارسال اطلاعات و ذخیره سازی در دیتابیس ؟

    • سعید یاورنیا ۲۱ خرداد ۱۳۹۹ - ۱۱:۳۰

      ببینید HTTP API تعدادی تابع داره که به کمک اونها می تونید با وب سرویس های مختلفی ارتباط برقرار کرده و داده های مدنظرتون رو ارسال و دریافت کنید، حالا شما می تونی همین کار رو مستقیما با جاوا اسکریپت یا jquery انجام بدی.

      WP Rest API یک سطح بالاتر به شما اجازه می ده که API های مختلفی برای وردپرس ایجاد کنید و به سایرین این امکان رو بدید تا با API شما تعامل داشته باشند.

      به نظر من اول پروژه را آنالیز کنید، می خواید با یک سرویس خارجی ارتباط برقرار کنید خب HTTP API گزینه خوبیه، مثلا پلاگین های وردپرس برای اعتبارسنجی لاسینسشون از این روش استفاده می کنند.
      قراره شما به دیگران سرویس بدید خب به کمک WP Rest API ای پی ای اختصاصی تعریف و در اختیارشون قرار بدید، برای اطلاعات بیشتر پیشنهاد می کنم مطلب آموزش دریافت و نمایش نوشته های وردپرس با WP REST API رو مطالعه کنید.

دیدگاهتان را بنویسید.

نشانی ایمیل شما منتشر نخواهد شد، بخش‌های موردنیاز با * مشخص شده‌اند.