JS | AJAX - jQuery | Руководство по AJAX (асинхронный JavaScript и XML)

// Создаём функцию «обработчика» которая вызывается, когда...

// ...запрос AJAX успешен
var updatePage = function( resp ) {
  $( '#target').html( resp.people[0].name );
};
  
// ...запрос AJAX провалился
var printError = function( req, status, err ) {
  console.log( 'что-то пошло не так', status, err );
};

// Создаём объект для описания запроса AJAX
var ajaxOptions = {
  url: '/data/people.json',
  dataType: 'json',
  success: updatePage,
  error: printError
};

// Инициализируем запрос!
$.ajax(ajaxOptions);

$.ajax({
  url: '/data/people.json',
  dataType: 'json',
  success: function( resp ) {
    $( '#target').html( resp.people[0].name );
  },
  error: function( req, status, err ) {
    console.log( 'что-то пошло не так', status, err );
  }
});

$.ajax( '/data/people.json', {
  type: 'GET',
  dataType: 'json',
  success: function( resp ) {
    console.log( resp.people );
  },
  error: function( req, status, err ) {
    console.log( 'что-то пошло не так', status, err );
  }
});

$.ajax({
    url: url,
    data: { 
        start: start, 
        end: end
    }
}).done(function(data, textStatus, jqXHR) {
    $('#myElement').append(data);
}).fail(function() {
    // report error    
});

$.ajax({
  accepts: {
    mycustomtype: 'application/x-some-custom-type'
  },
 
  // Инструкции кк десериализовать тип данных  `mycustomtype`
  converters: {
    'text mycustomtype': function(result) {
      // Как то преобразуем
      return newresult;
    }
  },
 
  // Ожидаем от сервера тип данных `mycustomtype`
  dataType: 'mycustomtype'
});

$.ajax({
    url: "test.html",
    context: document.body
}).done(function() {
      $( this ).addClass( "done" );
});

{
    "text": window.String, 
    "text html": true, 
    "text json": jQuery.parseJSON, 
    "text xml": jQuery.parseXML
}

function foundation_scripts_and_styles()
{
    wp_enqueue_script(
        'global',
        get_template_directory_uri() . '/js/global.js',
        null,
        null,
        true
    ); /* This should go first */

    wp_localize_script('global', 'flow', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'is_user_logged_in' => is_user_logged_in()
    ]);
}
add_action('wp_enqueue_scripts', 'foundation_scripts_and_styles');

/* global flow */
$.ajax({
  url: flow.ajax_url,
  type: 'GET',
  beforeSend: function () {},
  data: {
    action: 'action_name',
  },
  dataType: 'json',
}).done(function () {
  $(this).addClass('done')
})

/* global flow */
$.get(flow.ajax_url, {
  action: 'load_more',
  offset: $('.item').length,
}).done(function (response) {
  $('#container').append(response)
})

/* global flow */
$.post(flow.ajax_url, {
  action: 'load_more',
  offset: $('.item').length,
}).done(function (response) {
  $('#container').append(response)
})

/* global flow */
$.get(flow.ajax_url, {
  action: 'create_article',
  name: $parent.find('.td_title').text(),
  date: $parent.find('.td_date').text(),
  image: $parent.find('.td_image').text(),
  content: $parent.find('.td_content').html(),
  is_column: $parent.find('.td_is_column').text(),
  column: $parent.find('.td_column').text(),
  is_featured: $parent.find('.td_is_featured').text(),
}).done(function (response) {
  console.log(response)
  $parent.removeClass('is-loading')
  $parent.addClass(response.status ? 'is-success' : 'is-error')
  createArticle(++index)
})

add_action('wp_ajax_[action]', 'my_action_callback');
add_action('wp_ajax_nopriv_[action]', 'my_action_callback');

function my_action_callback()
{
    $news = new WP_Query([
        'post_type' => 'post'
    ]);
    if ($news->have_posts()) {
        while ($news->have_posts()) {
            $news->the_post();
            show_template('loop-post');
        }
    }
    wp_die();
}

function my_action_callback()
{
    $news = new WP_Query([
        'post_type' => 'post',
        'offset' => $_POST['offset'] ?? 0
    ]);
    
    if ($news->have_posts()) {
        $html = '';
        while ($news->have_posts()) {
            $news->the_post();
            $html .= return_template('loop-post');
        }
    }

    wp_send_json([
        'html' => $html,
        'post_count' => $news->found_posts
    ]);
    wp_die();
}

$('.load-more-btn').on('click', function () {
  /* global flow */
  $.post(flow.ajax_url, {
    action: 'load_more',
    offset: $('.item').length,
  }).done(function (response) {
    if (response.html) {
      $('#container').append(response.html)
    }
    if ($('.item').length >= response.post_count) {
      $('.load-more-btn').hide()
    }
  })
})

<?php
 
/* Add to foundation_scripts_and_styles() function after global.js */
 
wp_localize_script( 'global', 'ajax', array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'project_nonce' ) ) );
 
/** Add Before "HIDE/SHOW WORDPRESS PLUGINS MENU ITEM"
 * Load more posts on category page
 */
 
add_action( 'wp_ajax_load_more_posts', 'load_more_posts_callback' );
add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts_callback' );
 
function load_more_posts_callback() {
 
    $newsArgs = array(
        "post_type"      => "post",
        "orderby"        => "date",
        "order"          => "DESC",
        // Get for one more post then needed to check if there anything to load in future
        "posts_per_page" => get_option( 'posts_per_page' ) + 1,
        'offset'         => $_POST['offset'],
        'post_status'    => 'publish',
    );
     
    $news      = new WP_Query( $newsArgs );
    $last_page = true;
    $response  = array();
    if ( $news->have_posts() ):
        while ( $news->have_posts() ): $news->the_post();
            /**
             * $current_post is counted from zero.
             * If current post is extra post then we have at least one more page to load
             */
            if ( $news->current_post == get_option( 'posts_per_page' ) ) {
        $last_page = false;
        continue;
    }
            $response['html'] .= <div class='cell medium-6 blog-item'>" . return_template( 'loop-post' ) . '</div>';
         
        endwhile;
    endif;
    wp_reset_query();
    $response['last_page'] = $last_page;
    wp_send_json( $response );
}

/**
 * Load more posts within category
 */
 
var morePostsRequest;
$( document ).on( 'click', '.js-load-posts', function( e ) {
  e.preventDefault();
  if ( morePostsRequest ) {
    morePostsRequest.abort();
  }
  var $this = $( this ), $buttonWrapper = $this.closest( '.posts-list__more' );
  var data = {
    'action': 'load_more_posts',
    'nonce': ajax.nonce,
    'offset': $this.closest('.posts-list').find( '.preview' ).length,
  };
   
  morePostsRequest = $.ajax( {
    url: ajax.url,
    type: 'POST',
    data: data,
    beforeSend: function() {
      $this.addClass( 'loading' );
    },
    success: function( resp ) {
      $buttonWrapper.before( resp.html );
      $this.removeClass( 'loading' );
      // If we loaded last page then hide `Load more` button
      if ( resp.last_page ) {
        $buttonWrapper.hide();
      }
    },
    error: function( err ) {
      console.log( err.textStatus );
    }
  } );
} );

<?php 
$newsArgs = array(
    "post_type"      => "post",
  "orderby"        => "date",
  "order"          => "DESC",
  "posts_per_page" => get_option( 'posts_per_page' ),
);
$news = new WP_Query( $newsArgs ); ?>
<?php if ( $news->have_posts() ): ?>
<div class="grid-x grid-margin-x posts-list">
  <?php while ( $news->have_posts() ): $news->the_post(); ?>
    <div class="cell medium-6">
      <?php show_template( 'loop-post' ); // artical inside loop-post.php should has class to make a count ?>
    </div>
  <?php endwhile; ?>
  <?php if ( $news->max_num_pages > 1 ): ?>
    <div class="posts-list__more cell">
      <button class="button expanded js-load-posts"><?php _e( 'Load more', 'wits' ); ?></button>
    </div>
  <?php endif; ?>
</div>
<?php endif;
wp_reset_query(); ?>

wp_localize_script( 'global', 'ajax', array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'project_nonce' ) ) );

<a href="#" class="selector" data-news_id="320">Read More </a>;

$( 'a.selector' ).each( function () {
 $( this ).fancybox( {
  ///...
   type: 'ajax',
   href: ajax.url,
   ajax: {
     dataType: 'html',
     type: "POST",
     data: {
       news_id: $( this ).data( 'news_id' ),
       action: 'get_post_content',
       nonce: ajax.nonce
     }
   }
 } );
} );

$( 'a.selector' ).on( 'click', function( e ) {
 var $toggle = $( this ), newsID = $toggle.data( 'news_id' );
 e.preventDefault();
 $.fancybox.open( {
   src: ajax.url,
   type: 'ajax',
   opts: {
     ajax: {
       settings: {
         dataType: 'html',
         type: 'POST',
         data: {
           news_id: newsID,
           action: 'get_post_content',
           nonce: ajax.nonce
         },
       }
     },
   }
 } );
} );

$( 'a.selector' ).on( 'click', function( e ) {
var $toggle = $( this ), newsID = $toggle.data( 'news_id' ), activeSlide = 0;
 e.preventDefault();
 var ajaxSettings = {
   src: ajax.url,
   type: 'ajax',
   opts: {
     ajax: {
       settings: {
         dataType: 'html',
         type: 'POST',
         data: {
           news_id: false,
           action: 'get_post_content',
           nonce: ajax.nonce
         },
       }
     },
   }
 };
 var fancyOpts = [];
 $( 'a.selector' ).each( function( i, e ) {
   fancyOpts.push( $.extend( true, {}, ajaxSettings ) );
   fancyOpts[i].opts.ajax.settings.data.news_id = $( this ).data( 'news_id' );
  if ( newsID === $( this ).data( 'news_id' ) ) {
   activeSlide = i;
  }
 
 } );
 $.fancybox.open( fancyOpts, {
  onInit: function( instance ) {
    instance.jumpTo( activeSlide, 0 );
  }
 } );
} );

$( "a.button" ).on( "click", function( e ) {
    var $toggle = $( this ), newsID = $toggle.data( "news_id" );
    e.preventDefault();
      if ( newsID ) {
        let data = {
          action: "get_post_content",
          news_id: newsID
        }
        let getParams = $.param(data);
        let src = ajax.url + "?" + getParams;
        Fancybox.show(
          [{
            src: src,
            type: "ajax",
          }]
        )
    }
} );

add_action( 'wp_ajax_get_post_content', 'get_post_content_callback' );
add_action( 'wp_ajax_nopriv_get_post_content', 'get_post_content_callback' );
 
function get_post_content_callback() {
   // check_ajax_referer('project_nonce' ,'nonce'); // Cause error on WPEngine
 
    $selected_news = get_post( $_POST['news_id'] );
    ob_start(); ?>
    <div class="news-item">
    <!-- BEGIN of post content -->
    </div>
    <?php $html = ob_get_clean();
    echo $html;
    wp_die();
}