درخواست AJAX با fetch، بدون jQuery

async function loadPosts() {
  const res = await fetch('/api/posts');
  if (!res.ok) {
    throw new Error(`پاسخ ناموفق: ${res.status}`);
  }
  const posts = await res.json();
  return posts;
}

loadPosts()
  .then((posts) => console.log(posts))
  .catch((err) => console.error(err));

async function createComment(postId, text) {
  const res = await fetch('/api/comments', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    },
    body: JSON.stringify({ post_id: postId, text }),
  });

  if (!res.ok) {
    const problem = await res.json().catch(() => ({}));
    throw new Error(problem.message ?? `خطا: ${res.status}`);
  }
  return res.json();
}

const form = document.querySelector('#contact');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const data = new FormData(form);

  const res = await fetch(form.action, { method: 'POST', body: data });
  const result = await res.json();
  console.log(result);
});

const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), 8000);

try {
  const res = await fetch('/api/slow', { signal: controller.signal });
  console.log(await res.json());
} catch (err) {
  if (err.name === 'AbortError') {
    console.warn('درخواست لغو شد');
  } else {
    console.error(err);
  }
} finally {
  clearTimeout(timer);
}

<?php
add_action('rest_api_init', function () {
    register_rest_route('demo/v1', '/note', [
        'methods'             => 'POST',
        'callback'            => 'demo_save_note',
        'permission_callback' => fn () => current_user_can('edit_posts'),
        'args'                => [
            'text' => [
                'required'          => true,
                'sanitize_callback' => 'sanitize_text_field',
            ],
        ],
    ]);
});

function demo_save_note(WP_REST_Request $request): WP_REST_Response
{
    $text = $request->get_param('text');
    // ذخیره‌ی امن...
    return new WP_REST_Response(['saved' => true, 'text' => esc_html($text)], 200);
}

<?php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script('demo-note', plugins_url('note.js', __FILE__), [], '1.0', true);
    wp_localize_script('demo-note', 'demoNote', [
        'url'   => esc_url_raw(rest_url('demo/v1/note')),
        'nonce' => wp_create_nonce('wp_rest'),
    ]);
});

async function saveNote(text) {
  const res = await fetch(demoNote.url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-WP-Nonce': demoNote.nonce,
    },
    body: JSON.stringify({ text }),
  });
  return res.json();
}

<meta name="csrf-token" content="{{ csrf_token() }}">

const token = document.querySelector('meta[name="csrf-token"]').content;

const res = await fetch('/notes', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'X-CSRF-TOKEN': token,
  },
  body: JSON.stringify({ text: 'سلام' }),
});

async function api(url, { method = 'GET', body, headers = {} } = {}) {
  const res = await fetch(url, {
    method,
    headers: {
      'Accept': 'application/json',
      ...(body ? { 'Content-Type': 'application/json' } : {}),
      ...headers,
    },
    body: body ? JSON.stringify(body) : undefined,
  });

  const data = await res.json().catch(() => null);
  if (!res.ok) {
    throw new Error(data?.message ?? `خطا: ${res.status}`);
  }
  return data;
}

// استفاده
const posts = await api('/api/posts');
await api('/api/comments', { method: 'POST', body: { text: 'سلام' } });

const params = new URLSearchParams({ q: 'دوره‌ی PHP', page: 2 });
const res = await fetch(`/api/search?${params}`);